无法读取未定义的属性“问题”

Question

在此应用程序中，我正在尝试创建测验应用程序。

" ".join(sorted(a.split(), key=lambda x: b[x]))

（此代码包含的所有控制台日志只是为了让我直观地了解正在发生的事情）

在以下代码中，我使用import React, { useState, useEffect, Component } from 'react'; const axios = require('axios').default; const PlayQuiz = () => { // declaring all the state here const [questionsArray, setQuestionsArray] = useState([]); // Using effects here useEffect(() => { axios({ method: 'get', url: 'https://opentdb.com/api.php?amount=10', }).then(res => {console.log(Object.values(res.data)[1]); setQuestionsArray(Object.values(res.data)[1])}) .catch(err => console.error(err)) }, []); useEffect(() => {console.log(questionsArray)}, [questionsArray]); // Returning html markup here return (<> <div className = 'questions-container'> {/* {questionsArray.map(questionObject => <h1>{questionObject.question}</h1>)} */} <h1>{questionsArray[0].question}</h1> </div> </>) } export default PlayQuiz; 从API中获取数据，然后解析我的axios中的数据。然后我想将一个标题标签打印到我的dom中，该标签包含数组中的第一个元素，即对象，并获取包含实际问题的对象的question属性。但是当我这样做时：questionsArray，它抛出一个错误，说无法读取未定义的属性问题。

以防万一，如果您想看到我从API获得的对象：

然后从该对象中，从对象中的数据键获取结果对象值，并将其设置为<h1>{questionsArray[0].questions}</h1>。

如果任何人想看看我的questionsArray中存储了什么：

如何解决此错误？

Answer 1

您可以尝试可选的链接?.

<h1>{questionsArray[0]?.question}</h1>

检查一下： https://codesandbox.io/s/strange-lovelace-06u3x?file=/src/App.js

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Answer 2

当React渲染您的数据时，axios不会完全破坏您的数据，并且您的questionsArray是未定义的或为空。只需检查axios是否已完成数据获取即可。

return (<>
    <div className = 'questions-container'>
        {/* {questionsArray && questionsArray.map(questionObject => <h1>{questionObject.question}</h1>)} */}
<h1>{questionsArray[0].question}</h1>
    </div>
</>)

这将确保您的数据已定义或为空