Estoy tratando de agregar la biblioteca AOS para reaccionar. Mi código es así ahora, lo que me da un error de que init no está definido:

 import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import Menubar from './Components/Menubar/Menubar'; import Products from './Components/Products/Products'; import { useEffect, useState } from 'react'; import 'aos/dist/aos.css' import { AOS } from 'aos'; function App() { const [product, setProduct]= useState([]); useEffect(()=>{ fetch('https://fakestoreapi.com/products') .then(Response=>Response.json()) .then(data=>setProduct(data)) },[]); AOS.init(); const [count, setCount]= useState(0); return ( <div> <Menubar count={count}></Menubar> <Products count={count} setCount={setCount} product={product}></Products> </div> ); } export default App;

Y cuando trato de usar AOS.init() con gancho, obtengo No puedo realizar una actualización de estado React en un componente desmontado. Esto no es operativo, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y tareas asincrónicas en una función de limpieza useEffect.

 import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import Menubar from './Components/Menubar/Menubar'; import Products from './Components/Products/Products'; import { useEffect, useState } from 'react'; import 'aos/dist/aos.css' import { AOS } from 'aos'; function App() { const [product, setProduct]= useState([]); useEffect(()=>{ fetch('https://fakestoreapi.com/products') .then(Response=>Response.json()) .then(data=>setProduct(data)) },[]); useEffect(()=>{ AOS.init(); },[]) const [count, setCount]= useState(0); return ( <div> <Menubar count={count}></Menubar> <Products count={count} setCount={setCount} product={product}></Products> </div> ); } export default App;