hi this is my code: https://codesandbox.io/s/busy-tdd-e8s1ej?file=/src/App.js
for the react-router-dom, I used the ver5.2 .
I couldn't for the life of me figure out the missing dependency, I try searching for answers here but it told me to add me to the dependency to no avail.
I appreciate any enlighten on this issue, thank you
CodePudding user response:
because you're using something that is defined outside of useEffect
(in this case fetchProduct
function), react will throw a warning saying if something changes inside the fetchProduct
function, useEffect
will not catch that change. for example: let's say your match.params.id
inside fetchProduct
is equal to 1
when the page first loaded, but later on match.params.id
becomes 2
, the fetchProduct
function inside useEffect
will still use 1
as match.params.id
because useEffect
didn't catch the changes.
so to solve the warning, there are 2 options. first is to write the fetchProduct
function logic inside useEffect
:
useEffect(() => {
axios
.get(`https://fakestoreapi.com/products/?id=${match.params.id}`)
.then((res) => {
setData(res.data);
console.log(res.data);
})
.catch((err) => console.log(err));
}, [match.params.id]);
having match.params.id
in dependency array to make sure useEffect
is up to date.
but if you need to reuse the fetchProduct
function, then you should do something like:
const fetchProduct = useCallback(() => {
axios
.get(`https://fakestoreapi.com/products/?id=${match.params.id}`) // use match to get product id
.then((res) => {
setData(res.data);
console.log(res.data);
})
.catch((err) => console.log(err));
}, [match.params.id]);
useEffect(() => {
fetchProduct();
}, [fetchProduct]);
CodePudding user response:
It is a warning, Kindly look through the documentation of useEffect()
https://reactjs.org/docs/hooks-effect.html.
Whenever you add in a dependency in the array, it will watch all those values and it will re-run the useEffect
hook. whenever that particular value/dependency changes.
CodePudding user response:
You are using the fetchProduct
function in your effect, so it is a dependency. The error message should tell you that.
One way to fix it is to move the fetchProduct
function inside the effect. Then match
will become a dependency of the effect, but you probably want that as if match
changes you most likely want to fetch the new product.
useEffect(() => {
// function fetchProducts
const fetchProduct = () => {
axios
.get(`https://fakestoreapi.com/products/?id=${match.params.id}`) // use match to get product id
.then((res) => {
setData(res.data);
console.log(res.data);
})
.catch((err) => console.log(err));
};
fetchProduct();
}, [match]);