Investigué un poco y aprendí que useState es asíncrono, aunque todavía no estoy seguro de cómo solucionar mi problema particular. Necesito obtener los datos de una API, y el estado solo actualiza el segundo renderizado, además necesito obtener solo 1 archivo, por lo que agregar el nuevo estado actual al anterior probablemente no sea una opción.
(el resultado es que ahora dice .map no es una función ya que useState está vacío)
useEffect(() => { axios.get(`http://localhost:8080/files/public/${id}`) .then(res => { console.log(res.data); setFile(res.data); }) }, []); { file.map((row, index) => { return <li>{index}</li> }) } Editar: useState en realidad está inicializado const [file, setFile] = useState([]);
Una razón por la que podría obtener este error es si ha inicializado el estado del file sin proporcionar un valor, lo que significa que tiene el valor de undefined (pero necesitaríamos ver cómo está declarando el estado para confirmarlo). Como undefined no es un prototipo que tenga una propiedad de map nativo (o cualquier propiedad), no puede llamar a la propiedad de map en el renderizado inicial.
Debería poder deshacerse del error inicializando el estado en una matriz vacía como esta:
const [file, setFile] = useState([]); Establecer el estado inicial significa que el primer procesamiento tratará file como una matriz vacía, por lo que puede llamar al map y simplemente no generará nada (ya que la matriz está vacía).
Ejemplo de código final:
const MyComponent = () => { const [file, setFile] = useState([]); useEffect(() => { axios.get(`http://localhost:8080/files/public/${id}`).then((res) => { console.log(res.data); setFile(res.data); }); }, []); return ( <div> {file.map((row, index) => { return <li>{index}</li>; })} </div> ); } Actualización: otra razón podría ser que la respuesta que recibe de axios no es una matriz. En este caso, podría ser una solución a:
res.json() o res.text() en la respuesta de axios (para que no esté manejando un Objeto de respuesta, pero de hecho está manejando los datos);'["comment 1","comment 2","etc..."]' , primero debe llamar a JSON.parse ;{ data: { comments: [...] } } con file.data.comments