React中useEffect出现questions is undefined错误的原因分析

1. 核心错误：questions初始值未定义导致读取异常 #

你定义questions状态时未设置初始值：

const [questions, setQuestions] = useState<any>();

组件首次渲染时，questions为undefined。第二个useEffect依赖questions，第一次执行时直接访问questions.length，必然抛出questions is undefined错误。

另外，fetch是异步操作，请求返回前questions始终是undefined——网络请求快时，组件重渲染前questions已赋值，错误不会触发；网络慢时就会触发，这就是错误“有时出现”的原因。

2. 额外问题：循环内多次setState的无效操作 #

你在循环里反复调用setQuestion和setAnswers，每次调用都会触发组件重渲染，且最终只会保留最后一次循环的结果，根本无法展示所有问题。

修复代码 #

第一步：给状态设置合理初始值 #

// 给questions设置初始空数组，避免undefined
const [questions, setQuestions] = useState<any[]>([]);
const [question, setQuestion] = useState<string>("")
// 给answers设置初始空数组，匹配数据结构
const [answers, setAnswers] = useState<any[]>([])

第二步：修正useEffect的判断逻辑 #

useEffect(() => {
  // 先判断questions是数组且有长度，再执行后续逻辑
  if (Array.isArray(questions) && questions.length > 0) {
    // 示例：展示第一个问题（若要展示所有，需改用列表渲染）
    setQuestion(questions[0].question)
    setAnswers(questions[0].answers)
  }
}, [questions])

第三步：展示所有问题的正确渲染方式 #

如果要展示所有问题及对应答案，不要用单个question和answers状态，直接遍历questions数组渲染：

return (
  <div>
    {questions.map((item) => (
      <div key={item.id}>
        <p>{item.question}</p>
        <ul>
          {item.answers.map((ans) => (
            <li key={ans.id}>{ans.answer}</li>
          ))}
        </ul>
      </div>
    ))}
  </div>
)

内容的提问来源于stack exchange，提问作者SK1dev