Question

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

2021-05-16

79

reactjs react-hooks

我在 console.log 中获取数据，但是每当我在步骤中描述 getQuestion[0].question 时，它都显示未定义。我在这里做错了什么，请帮助我，提前谢谢了

function App() {
 const [getQuestion, setQuestion] = useState([]);

useEffect(() => {
  axios
  .get('************')
  .then(function (response) {
   const questionsList = response.data.question
   setQuestion(questionsList)
});
},[])
console.log(getQuestion)

 const steps = [
{
  id: '1',
  message: getQuestion[0].question
  trigger: '2',
},
{
  id: '2',
  message: getQuestion[1].question
  trigger: '3',
}]
}

console.log(getQuestion) 显示这些：

Answer 1

这是因为您的初始状态是 []。您的步骤分配在 API 调用完成之前执行，因此访问空数组的元素将返回未定义。

您的 console.log 语句可能也会在您收到异常之前记录“[]”。

Answer 2

我认为这是关于了解 React 中同步和异步发生的所有事情之间的区别。

useEffect 可能在执行 steps 之前运行，但您的 setQuestion 本质上是一个异步函数。因此，当您定义 steps 时，您的 getQuestion 是 [] 。因此，当您执行 getQuestion[i] 时，其中 i = 0 或 1 ，它会中断。

我认为您只需进行少量更改即可实现 steps 的相同结构。

const steps = getQuestion.map(({ question }, index) => ({
  id: index + 1,
  message: question,
  trigger: index + 2
}));