Tengo el siguiente componente de función en React:
function GetData() { const [randomDataJSON, setRandomDataJSON] = useState(''); const url = 'https://randomuser.me/api/'; const getData = () => { axios .get(`${url}`) .then((results) => { const userData = results.data.results; setRandomDataJSON(JSON.stringify(userData, null, 2)); }) .catch((err) => console.error(err)); }; return ( <div> <h3>GetData Component</h3> <pre>{randomDataJSON[0].name.first}</pre> <button onClick={getData}>Get Data</button> </div> ); } export default GetData;Los datos JSON de la API son los siguientes:
[ { "gender": "female", "name": { "title": "Miss", "first": "Barbara", "last": "Sullivan" }, ... Me gustaría acceder y mostrar el first name de los datos JSON de la API usando {randomDataJSON[0].name.first en la etiqueta <pre> . Sin embargo, sigo recibiendo el siguiente mensaje de error: TypeError: Cannot read properties of undefined (reading 'name')
Está configurando la cadena json en la variable de estado randomDataJSON e intentando usar la cadena JSON como un objeto. Puede intentar console.log(randomDataJSON) para confirmar mis sospechas.
Creo que no debería convertir su objeto de datos a json en primer lugar, así que setRandomDataJSON(JSON.stringify(userData, null, 2)); será setRandomDataJSON(userData) ;
function GetData() { const [randomData, setRandomData] = useState(''); const url = 'https://randomuser.me/api/'; const getData = () => { axios .get(`${url}`) .then((results) => { const userData = results.data.results; setRandomData(userData, null, 2); }) .catch((err) => console.error(err)); }; return ( <div> <h3>GetData Component</h3> <pre>{randomData[0].name.first}</pre> <button onClick={getData}>Get Data</button> </div> ); } export default GetData;En el momento en que se carga la página, axios no se habría ejecutado para solicitar la matriz, por lo que randomDataJSON es una cadena en ese momento. Podrías hacerlo
const [randomDataJSON, setRandomDataJSON] = useState([]);Arriba, configúrelo en una matriz vacía y luego verifique si tiene longitud
<pre>{randomDataJSON.length > 0 && randomDataJSON[0].name.first}</pre>Muchas gracias a todos los que me apuntan en la dirección correcta. Mi nuevo código es el siguiente. Mi problema era que no sabía que React no te permite renderizar objetos Javascript. Para solucionar esto, solo uso el método map() para mapear los datos y mostrar las propiedades en el objeto.
function GetData() { const [randomDataJSON, setRandomDataJSON] = useState([]); const url = 'https://randomuser.me/api/'; const getData = () => { axios .get(`${url}`) .then((results) => { const userData = results.data.results; setRandomDataJSON(userData); }) .catch((err) => console.error(err)); }; console.log('It is an', typeof randomDataJSON); console.log('randomDataJSON is ', randomDataJSON); return ( <div> <h3>GetData Component</h3> {randomDataJSON.map((data) => { return <p>{data.name.first}</p>; })} <button onClick={getData}>Get Data</button> </div> ); } export default GetData;