• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

173
Vistas
How to pass id using Link in React JS

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;
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You have to provide the fetchiditem in the array:

useEffect(() => {
  fetchiditem();
}, [fetchiditem]);
almost 3 years ago · Juan Pablo Isaza Denunciar

0

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]);
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda