I am doing a fetch request in useEffect hook. It is how it looks like.
useEffect(() => {
// clear prev state
setUniqueValues([]);
setLoading(true);
// get unique values and set field values;
jwtAxios
.post(`${baseURL}/support/get_unique_values`, {
field: fieldName,
catalog_id: catalogID,
page,
category_values: props?.initialValues?.schema?.category,
})
.then((data) => {
setUniqueValues(data.data.unique_values);
setLoading(false);
setError(false);
})
.catch((err) => {
console.log(err);
setError(err);
});
}, [catalogID, fieldName, page]);
In the post request I want to send a value (category_values) if it is exists, if it comes with props. so I check with ?.
But if I don't put it in dependency array it complains:
warning React Hook useEffect has a missing dependency: 'props?.initialValues?.schema?.category'. Either include it or remove the dependency array react-hooks/exhaustive-deps
If I add it like [catalogID, fieldName, page,props?.initialValues?.schema?.category ]
It complains like :
Line 100:8: React Hook useEffect has a missing dependency: 'props.initialValues.schema.category'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 100:37: React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps
If I don't put ?'s when props are not passed, it is collapsing because it doesn't find props.
How do I solve it? Thanks.
you can compute the category just before calling useEffect
const category = props?.initialValues?.schema?.category;
useEffect(() => {
setUniqueValues([]);
setLoading(true);
jwtAxios
.post(`${baseURL}/support/get_unique_values`, {
field: fieldName,
catalog_id: catalogID,
page,
category_values: category,
})
...
}, [catalogID, fieldName, page, category]);