Estoy creando mi primera aplicación de reacción para mi último curso de reacción en scrimba y estoy recuperando datos de una API y configurando una parte de los datos en una matriz establecida en el estado, pero parece que no puedo acceder a una propiedad de la matriz
import React from 'react' const [request, setRequest] = React.useState([]) React.useEffect (() => { fetch('https://opentdb.com/api.php?amount=5') .then(res => res.json()) .then(data => setRequest(data.results.map(({ question, correct_answer, incorrect_answers }) => ({question, correct_answer, incorrect_answers})))) }, []) console.log(request[0]) // returns the first object array console.log(request[0]["question"]) // gives an error console.log(requst[0].question) // gives an error <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>pero parece que no puedo acceder a una propiedad de la matriz
Claro que puedes, pero solo cuando existe ese elemento de matriz . El estado inicial de la matriz está vacío:
const [request, setRequest] = React.useState([]) Una matriz vacía no tiene elementos, por lo que se registra undefined en la consola:
console.log(request[0])Y luego esto produce un error:
console.log(request[0]["question"])Y entonces esto no da error, porque no se ejecuta, porque la línea anterior da error:
console.log(requst[0].question)Pero si se ejecutara esa línea de código, también produciría un error.
Los datos que está obteniendo para completar el estado provienen de una operación asíncrona. Así que va a suceder en algún momento posterior. (Podrían ser milisegundos y sentirse instantáneos, pero aún más tarde).
Hasta que se hayan obtenido esos datos y hasta que se haya actualizado el estado, el código debe poder manejar el estado inicial de la matriz vacía. El encadenamiento opcional es una opción:
console.log(requst[0]?.question)O tal vez envolviendo todo en un condicional:
if (request.length > 0) { console.log(request[0]); console.log(request[0]["question"]); console.log(requst[0].question); }La forma en que prefiera manejar una matriz vacía depende de usted y de la lógica que esté implementando. Pero el punto es que dado que define una matriz vacía, el código debe esperar comenzar con una matriz vacía.
Establecer datos dentro del estado de request lleva tiempo. Por lo tanto, siempre obtiene undefined para el primer registro de console.log(request[0]) y error para otros dos console.logs.
En ese caso, puede verificar usando el gancho UseEffect .
useEffect(() => { if(request.length === 0) return; console.log(request[0]); // returns the first object array console.log(request[0]['question']); console.log(requst[0].question); }, [request]); Si no desea usar useEffect , puede usar ? para acceder a las propiedades del objeto sin error.
console.log(request[0]); console.log(requst[0]?.question);if (request !== undefined && request.length > 0) { console.log(request[0]) console.log(request[0]["question"]) console.log(request[0].question) }