Uso MUI y tengo un componente Seleccionar (un menú desplegable) cuyas opciones quiero completar usando datos de una solicitud de recuperación. Almaceno los datos en el estado con una matriz, llamada 'socios'. Inicialmente, partners.map() no funcionaba porque partners estaba vacío, así que pensé que debería esperar a que terminara la búsqueda antes de renderizar. Y este es mi código con eso en mente:
const [partners, setPartners] = useState([]); React.useEffect(() => { fetch('http://localhost:3000/partners') .then((resp) => resp.json()) .then((data) => setPartners(data)); console.log(partners); }, []); if (!partners.length) { return <Typography>Loading...</Typography>; } return ( <FormControl> <> <Select onChange={handleFormChange} > {partners.map(({ name }) => ( <MenuItem value={name}>{name}</MenuItem> ))} </Select> </> </FormControl> )Pero ahora, la página está atascada en 'Cargando...' y no cambia. Intenté usar !!!partners.length en la declaración if también, pero no pareció hacer una diferencia. La instrucción console.log(partners) en useEffect solo devuelve una matriz vacía. La cuestión es que los datos que se obtienen definitivamente no están vacíos/nulos, por lo que no estoy seguro de lo que está pasando. ¿Es posible que console.log() se esté ejecutando antes de que las declaraciones fetch o setPartners se completen por completo? ¿Se están cambiando incluso los socios? Si es así, ¿cómo es posible que la comprobación de partners.length no devuelva True en ningún momento?
EDITAR: Corregido, vea la respuesta a continuación
React.useEffect(() => { fetch('http://localhost:3000/partners') .then((resp) => resp.json()) .then((data) => setPartners(data)); console.log(partners); <=== THIS IS EXECUTED AS SOON AS THE FETCH STARTS SO IT'S GONNA BE [] }, []); Si desea registrar los datos obtenidos, debe iniciar sesión en el último entonces. Recuerde colocar un .catch(e => console.error(e)) o no detectará ningún problema.
Si desea verificar los partners que son un estado React, debe colocar console.log(partners) justo dentro de la función React Component, antes de la declaración de return .
const [partners, setPartners] = useState([]); React.useEffect(() => { fetch('http://localhost:3000/partners') .then((resp) => resp.json()) .then((data) => { setPartners(data); console.log("FETCHED DATA:", data); }) .catch(e => console.error(e)); }, []); console.log("RENDERING, PARTNERS:", partners) if (!partners.length) { return <Typography>Loading...</Typography>; } return ( <FormControl> <> <Select onChange={handleFormChange} > {partners.map(({ name }) => ( <MenuItem value={name}>{name}</MenuItem> ))} </Select> </> </FormControl> )Creé este stackblitz para ti https://stackblitz.com/edit/react-mui-5spdkt?file=Hello.js
El problema era que el objeto que intentaba configurar en result.data no estaba en la lista, en mi caso, para la API de gatos, necesito el resultado. Los datos y, como dijo Cesare, el registro de su consola estaba en el lugar equivocado.
Solucionado, el problema era que la búsqueda devolvía un objeto con la matriz como valor y no la matriz en sí como supuse, así que creo que eso estaba arruinando las cosas. Acabo de reemplazar setPartners(data) con setPartners(data[key]) donde key es la clave asignada al valor.