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

Question

我在 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 调用完成之前执行，因此访问空数组的元素将返回 undefined。

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

Answer 2

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

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

我认为您只需稍加改动即可实现与 steps 相同的结构。

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