• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

176
Views
¿Cómo puedo acceder a una propiedad de una matriz de objetos establecida en el estado?

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>

almost 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report

0

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);
almost 3 years ago · Juan Pablo Isaza Report

0

if (request !== undefined && request.length > 0) { console.log(request[0]) console.log(request[0]["question"]) console.log(request[0].question) }
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error