He creado un sitio web simple. Tengo que crear dos páginas. La primera página es para mostrar varias categorías. La segunda página es para detalles. por ejemplo imágenes, descripción también. Hice clic en el enlace para pasar los datos de la segunda página, pero todavía tengo un error, no puedo pasar los datos. Error:
React Hook useEffect tiene una dependencia faltante: 'fetchiditem'. Inclúyalo o elimine la matriz de dependencias react-hooks/exhaustive-deps
Como solucionar mi error por favor denme una solución.
Aplicación.js
<Routes> <Route path='/shop' exact element={<Shop />}></Route> <Route path='/shop/:id' element={<Shopdetails />}></Route> </Routes>Tienda.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;Detalles de la tienda.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;Tienes que proporcionar el fetchiditem en la matriz:
useEffect(() => { fetchiditem(); }, [fetchiditem]);Definir la función dentro del 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]);