Estoy tratando de crear una aplicación donde obtengo datos de una API de Graphql y actualizo el estado después de obtenerlos, pero después de la solicitud exitosa obtengo los datos pero no puedo actualizar el estado con esos datos. cuando registro en la consola los datos de respuesta, muestra la matriz con los datos requeridos, pero cuando actualizo el estado y la consola registra el estado, muestra una matriz vacía.
Necesito actualizar el estado para usarlo en el componente, cuando estoy haciendo esto, arroja un error de que currList no está definido.
Aquí hay fotos del código y la consola.
export default function App() { const [search, setSeach] = useState(""); const [currList, setCurrList] = useState([]); const fetchShips = async () => { const response = await request(gql` { ships { name home_port image } } `); console.log("request response", response.data); setCurrList(response.data); console.log("currlist:", currList); }; useEffect(() => { fetchShips(); }, [currList]); const Searchitems = (event) => { setSeach(event.target.value); setCurrList( currList.filter((item) => { return item.name.includes(search) || item.home_port.includes(search); }) ); }; return ( <div className="App"> <div className="container"> <header></header> <div className="body"> <input type="text" id="search" value={search} onChange={Searchitems} className="input" placeholder="Search Ships" /> <p>Total Count: {currList.length}</p> <div className="ships"> {currList.map((item, index) => { return ( <Ship key={index} name={item.name} port={item.port} img={item.image} /> ); })} </div> </div> </div> </div> ); }el Estado se actualiza pero no cuando el código se está ejecutando, por eso registra que el estado es una matriz vacía, intente consolar. Regístrelo una vez más y verá que hay algo en la Lista.
Eso es normal, todo está sucediendo de forma asíncrona. React activará una nueva representación una vez que se actualice su currList y obtendrá su nuevo valor. Si desea escuchar este cambio, debe usar useEffect con currList como dependencia.
useEffect(() => { console.log("List is updated", currList); }, [currList]);La función fetchShips tiene un cierre sobre la variable de estado currList que se relaciona con una llamada de representación específica, por lo que cuando lo registra después de llamar a setCurrList, le muestra el estado anterior, no el estado actualizado, puede iniciar sesión en useEffect para ver los cambios.