How to pass id using Link in React JS-CodePudding

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;

CodePudding user response：

You have to provide the fetchiditem in the array:

useEffect(() => {
  fetchiditem();
}, [fetchiditem]);

CodePudding user response：

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]);