i have create a simple website.I have to create two pages first page is to show various catergories. Second page is to details. for example images, description also. i have click link to pass data from second page but still now i have error can not pass data. Error:
React Hook useEffect has a missing dependency: 'fetchiditem'. Either include it or remove the dependency array react-hooks/exhaustive-deps
How to solve my error please give me solution.
App.js
<Routes>
<Route path='/shop' exact element={<Shop />}></Route>
<Route path='/shop/:id' element={<Shopdetails />}></Route>
</Routes>
Shop.js
function Shop() {
useEffect(() => {
fetchitems();
}, []);
const [items, setItems] = useState([]);
const fetchitems = async () => {
const data = await fetch("https://fortnite-api.theapinetwork.com/upcoming/get"
);
const itemsdata = await data.json();
// console.log(itemsdata.data);
setItems(itemsdata.data);
};
return (
<div>
{items.map(item => (
<h1 key={item.itemId}>
<Link to={`/shop/${item.itemId}`}>{item.item.name}</Link>
</h1>
))}
</div>
);
}
export default Shop;
Shopdetails.js
function Shopdetails({match}) {
useEffect(() => {
fetchiditem();
}, []);
const [itemid, setitems] = useState([]);
console.log(match);
const fetchiditem = async () => {
const data = await fetch (`https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`
);
const itemdata = await data.json();
setitems(itemdata.data.item);
}
return (
<div>
<img src={itemid.images.icon} alt="" />
</div>
);
}
export default Shopdetails;
You have to provide the fetchiditem in the array:
useEffect(() => {
fetchiditem();
}, [fetchiditem]);
Define the function inside the useEffect
useEffect(() => {
const fetchiditem = async () => {
const data = await fetch(
`https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`
);
const itemdata = await data.json();
setitems(itemdata.data.item);
};
fetchiditem();
}, [match.params.id]);