React.js - Невозможно получить доступ к значениям внутри массива объектов

#javascript #arrays #reactjs #object #react-hooks

#javascript #массивы #reactjs #объект #реагирующие крючки

Вопрос:

Я пытался получить доступ к значениям внутри массива объектов, но по какой-то причине, когда я использую console.log(quiz.questions[0].question) , я получаю сообщение об ошибке

Ошибка типа: не удается прочитать свойство ‘вопрос’ неопределенного

код:

 const quizAPI = process.env.REACT_APP_API_QUIZ;

const PlayQuiz = () => {
  const [quiz, setQuiz] = useState({
    title: '',
    questions: {},
  });
  useEffect(() => {
    async function getQuiz() {
      const param = window.location.search;
      const id = param.split('=');
      const Quiz = await axios.get(`${quizAPI}?_id=${id[1]}`);
      const { doc } = Quiz.data.data;
      console.log(doc[0]);
      const quizDoc = doc[0];
      setQuiz({ ...quiz, title: quizDoc.title, questions: quizDoc.questions });
    }
    getQuiz();
  }, []);
  console.log(quiz.questions[0].question);

что console.log(quiz) показывает:

 {title: "findme", questions: Array(3)}
questions: Array(3)
0: {_id: "5f5500caab44c4bd2b58b109", question: "sfdf", answerSelectionOne: "sdvsv", answerSelectionTwo: "asd", answerSelectionThree: "", …}
1: {_id: "5f5500cdab44c4bd2b58b10a", question: "sfdfddd", answerSelectionOne: "sdvsv", answerSelectionTwo: "asd", answerSelectionThree: "", …}
2: {_id: "5f5500cfab44c4bd2b58b10b", question: "sfdfdddv", answerSelectionOne: "sdvsv", answerSelectionTwo: "asd", answerSelectionThree: "", …}
length: 3
__proto__: Array(0)
title: "findme"
__proto__: Object

Ответ №1:

Обычно это означает, что вы пытаетесь получить доступ к свойству переменной, возможно, null или undefined .

Вероятно, вам нужно useState сначала изменить начальное значение, потому что questions это массив, а не объект {} , как показано ниже:

 const [quiz, setQuiz] = useState({
    title: '',
    questions: [],
});

Во-вторых, quiz.questions может иметь length of 0 . Итак, с помощью простой проверки перед like quiz.questions.length > 0 вы можете устранить эту проблему.

Затем вы можете использовать ведение журнала как:

 console.log(quiz.questions.length > 0 ? quiz.questions[0].question : null);

Ответ №2:

Для правильного доступа к значениям поля викторины рекомендуется использовать другой useEffect, который отслеживает quiz состояние :

     useEffect(() => {
        
        if(quiz.questions.length){
           console.log(quiz.questions[0].question);
         }
        
    }, [quiz]);

1. Второй эффект использования имеет большой смысл и поможет в дальнейшем. Спасибо,

2. Да, полезно предоставить вашим данным некоторый поток в течение жизненного цикла компонента

Ответ №3:

похоже, вы пытаетесь использовать объект {} в качестве массива []!

То, что Javascript пытается сделать, это получить доступ к этому:

 {
 "0" : { // your data},
}

Как это должно выглядеть:

 [
 0 : { // your data},
]

То, что вы хотите изменить, это :

 const [quiz, setQuiz] = useState({
    title: '',
    questions: [], // make it an array
});

И, возможно, рассмотрите возможность использования .push() для переноса отдельных объектов в массив