Estoy ejecutando un backend Flask y un frontend React. Dependiendo de algunas opciones en el frontend, los datos se obtienen del backend y se devuelven al frontend. Una cosa que sucede es que cuando la página se está cargando hay un estado predeterminado, que devuelve algunos datos desde el principio.
Una de las cosas que se devuelven son 5 matrices con una longitud de 24. Puedo ver desde el backend cómo se ven, y no hay problemas. Luego, si cambio el estado predeterminado (lo que da como resultado que se devuelvan datos diferentes), el backend debería devolver 5 matrices con una longitud de 48 en lugar de 24, es decir, el mismo tipo de objeto pero con diferentes longitudes.
Sin embargo, esto es allí deja de funcionar. Cuando paso de 48 a 24 de longitud, no hay problemas, pero cuando paso de 24 a 48 se detiene y recibo un Uncaught TypeError: Cannot read properties of undefined (reading '1') . Puedo ver en el backend que devuelve 5 matrices de longitud 48, pero en la interfaz, si hago un registro de consola de la longitud de las matrices, la primera matriz tiene una longitud de 48, pero las siguientes 4 son solo 24. Así que parece que hay algunos problemas con la actualización del estado de los datos en la interfaz.
Obtengo mis datos por:
function fetchData(e) { e?.preventDefault(); POST('/api', { data1: data1, data2: data2, data3: data3, data4: data4, data5: data5 }).then( async (response) => { const json = await response.json() setData1(json.data1) setData2(json.data2) setData3(json.data3) setData4(json.data4) setData5(json.data5) } ) } Donde los useStates se definen como:
const [data1, setData1] = useState([]); const [data2, setData2] = useState([]); const [data3, setData3] = useState([]); const [data4, setData4] = useState([]); const [data5, setData5] = useState([]);Entonces, ¿alguien puede detectar lo que podría estar haciendo mal?
Tal vez si usa await en cada setstate tendrá un mejor resultado, no es la mejor práctica, pero debería hacer el trabajo:
function fetchData(e) { e?.preventDefault(); POST('/api', { data1: data1, data2: data2, data3: data3, data4: data4, data5: data5 }).then( async (response) => { const json = await response.json() await setData1(json.data1) await setData2(json.data2) await setData3(json.data3) await setData4(json.data4) await setData5(json.data5) } ) }Según los comentarios, debe cambiar la estructura de datos de la siguiente manera:
function fetchData(e) { e?.preventDefault(); POST('/api', data).then( async (response) => { const json = await response.json() setData(json) } ) } Todavía tiene todos los datos y accederá a ellos con data.data1 . Como puede ver, para realizar la llamada a la API, solo necesita el objeto de datos y no necesita desestructurarlo.
Lo primero que se me ocurre es que:
setCount(count + 1); setCount((prevCount) => prevCount + 1)En la primera línea estamos actualizando el estado, pero no estamos seguros de cuándo se actualizará, por otro lado, en la segunda línea, usamos la devolución de llamada que proporciona el setter, y así es como estamos seguros de que vamos a obtener el valor actualizado.
Entonces, useState() es asincrónico, no hay confirmación de que los datos se actualizarán en el orden en que los puso en su código. Y ese es el problema aquí.
Para una explicación detallada, eche un vistazo a las referencias:
https://reactjs.org/docs/hooks-state.html
¿Por qué setState en reactjs Async en lugar de Sync?