Soy nuevo en React y Javascript en general. Simplemente estoy tratando de acceder a los índices de matriz después de una búsqueda. Puedo registrar un índice específico después de una actualización de archivo, pero cuando actualizo la página, aparece el error "Indefinido". Siento que estoy haciendo algo mal con mi estado, pero no sé lo suficiente sobre React para depurar esto. si intento acceder a "users[0].name", aparece el mensaje "TypeError: Cannot read properties of undefined (leyendo 'nombre') (función anónima).
import React, { useEffect, useState } from "react"; import { Container, Card, Divider, Typography } from "@mui/material"; const RestData = () => { const [data, setData] = useState([]); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/users/") .then((response) => response.json()) .then((data) => setData(data)); }, []); return ( <Container> {data.map((users) => { return ( <Card data={data} key={users.id} sx={{ width: "300px", mt: 2, background: "#ff9800" }} > <Typography variant="h6" color="seagreen"> {users.name} </Typography> <Divider /> {users.email} <Divider /> {users.company.name} <Divider /> {users.phone} <Divider /> {users.website} <Divider /> </Card> ); })} </Container> ); }; export default RestData;Aunque no veo que esto ocurra en el código que publicaste, obtienes ese error en particular porque estás tratando de acceder a .name cuando el objeto al que se accede no está definido.
Supongo que está tratando de hacer algo como data[0].name .
El problema es que su matriz data comienza vacía, por lo que si intenta acceder a cualquier índice de una matriz vacía, no estará undefined , obtendrá ese error.
La solución es asegurarse de que la matriz data ya tenga sus elementos antes de acceder a un índice de la misma.
Ahora, hay muchas maneras de hacer esto. Debido a que no parece ser parte de su código, es difícil decirle cuál es la mejor manera. Pero aquí hay un par:
1- Realice una verificación if antes de intentar acceder a la propiedad:
if (data[0]) { console.log(data[0].name) // do stuff } 2- Verifique si la propiedad existe primero usando el operador && : Para este caso, el intento de acceder al name solo se realiza si data[0] es verdadero.
console.log(data[0] && data[0].name) 3- Usar encadenamiento opcional . En mi opinión, este es el mejor, ya que le permite omitir el si y solo intentará acceder a una propiedad si no está undefined .
console.log(data[0]?.name)Ahora, para poner esto en práctica, aquí hay una aplicación de muestra:
const App = () => { const [data, setData] = React.useState([]); React.useEffect(() => { fetch("https://jsonplaceholder.typicode.com/users/") .then((response) => response.json()) .then((data) => setData(data)); }, []); console.log("data", data); return ( <div> <div> <h3>Example by accessing the index directly with Optional Chaining:</h3> <p>{data[0] && data[0].name}</p> </div> <div> <h3>Example with the map</h3> {(data).map((d) => { return <p>{d.name}</p>; })} </div> </div> ); } ReactDOM.render( <App />, document.getElementById('app') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="app"></div>Dado que está obteniendo los datos en el momento de la representación, no tiene users[0].name , entonces, ¿lo que sugeriría es usar el operador condicional ? .
Entonces tienes algo como esto
data[0]?.name Lo que sucede en este caso es que TypeScript intenta acceder al name de la propiedad en el índice dado, si la propiedad no está undefined , devuelve nulo; de lo contrario, devuelve el valor.
También hice una caja de arena rápida para demostración.