0
const [order, setOrder] = useState({});

useEffect(() => {
    fetch(`https://localhost/services/${id}`)
        .then(res => res.json())
        .then(data => setOrder(data))

}, [])
Ramesh Reddy
  • 10,159
  • 3
  • 17
  • 32
toufiq hoque
  • 1
  • 1
  • 1
    add id in useEffect dependence. `[id]` – Rahul Sharma Jan 04 '22 at 12:43
  • Does this answer your question? [How to fix missing dependency warning when using useEffect React Hook](https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook) – goto Jan 04 '22 at 12:45

4 Answers4

0

You need to add id to the dependency array

const [order, setOrder] = useState({});

useEffect(() => {
    fetch(`https://localhost/services/${id}`)
        .then(res => res.json())
        .then(data => setOrder(data))

}, [ id ])
Abhinand Shetty
  • 21
  • 3
0

I wouldn't worry too much about the dependency warning, if you only want this to run when the component mounts then just ignore it, or turn it off.

Alternatively you can create your own effect called useMount that can act as a pseudo hook for when you only want things to run once, for example.

import { useEffect } from 'react';

/**
 * This is a pseudo hook that is designed to navigate around the react-hooks/exhaustive-deps rules in eslint without the need to
 * disable it entirely in the rest of the application. useMount guarantees that it will only run once when mounted, and
 * only requires the rules disabling for this definition.
 *
 * Use `useMount` in every place you would normally call `useEffect` with the intention of running it once.
 */
// eslint-disable-next-line react-hooks/exhaustive-deps
export const useMount = (mount: () => void) => useEffect(mount, []);

export default useMount;
Duenna
  • 2,186
  • 2
  • 14
  • 17
0

Extra http request from useEffect:

const fetchData = () => {
    fetch(`https://localhost/services/${id}`)
        .then(res => res.json())
        .then(data => setOrder(data))
}

useEffect(() => {
    
    fetchData()
}, [])
Sonny Corleone
  • 81
  • 3
0

Try this way , hope it will work

 useEffect(() => {
    const fetchData = () => {
    fetch(`https://localhost/services/${id}`)
        .then(res => res.json())
        .then(data => setOrder(data))
};
  fetchData ();
}, []);
Muhammad Awais
  • 109
  • 1
  • 3