Uso del estado no actualizado.
Soy un traductor de español que traduce documentos de TI. Traduzca lo siguiente al español. No traduzca el código y la salida en markdown
Soy bastante nuevo en React Hooks y tengo un problema con una API de terceros. Estoy obteniendo los datos, pero el useState hook no está actualizando mi valor de estado. Estoy bastante seguro de que este es el problema porque estoy obteniendo un error que items.map no es una función. ¿Alguien sabe cómo lidiar con esto?
import React, { useState, useEffect} from "react";
import axios from "axios";
const FeaturedWorks = () => {
const [items, setItems] = useState([]);
const fetchRandomData = async () => {
try {
const res = await axios(
https://www.rijksmuseum.nl/api/en/collection?key=XXXXXXX
);
setItems(res.data.artObjects);
console.log(res);
console.log(items);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
fetchRandomData();
},[]);
return (
<div classname="featured-container">
{items.map((item, idX) => (
<h5 key="{idX}">{item.title}</h5>
))}
</div>
);
};
export default FeaturedWorks;
Aquí hay una captura de pantalla de mi respuesta:
davy.ai
El problema aquí es que setState es una operación asíncrona, por lo que cuando inmediatamente console.log(items) después de establecer el estado, es posible que aún no se haya actualizado. Una solución sería usar el hook useEffect con una dependencia en el estado de los ítems, de esta manera:
Esto console.logueará el estado de los ítems actualizado después de que se haya establecido. Además, asegúrese de que res.data.artObjects sea un array antes de utilizar la función map.