React+Redux项目问题：从json-server加载题目存入Redux后传递组件时应用崩溃

你遇到的是异步数据加载场景下非常典型的问题：在从json-server获取到题目数据前，组件就提前尝试渲染依赖该数据的子组件。具体来说，初始状态下questions是空数组（或未定义），当你访问questions[currentQuestionIndex]时得到的是undefined，将这个值传给Question组件后，它直接读取question属性就会触发Cannot read properties of undefined的错误。

下面是几个针对性的解决方法：

1. 初始化Redux状态，确保基础结构合理 #

首先要保证你的Redux初始状态里，questions被设置为空数组（而非undefined），这样至少不会因为数组本身不存在而引发额外错误。你的reducer初始状态可以写成：

const initialState = {
  questions: [],
  currentQuestionIndex: 0
};

2. 父组件添加条件渲染，避免传递无效数据 #

在渲染Question组件前，先判断要传递的questionObject是否存在，还可以同时显示加载提示：

{questions.length === 0 ? (
  <div>正在加载题目...</div>
) : (
  <Question questionObject={questions[currentQuestionIndex]}></Question>
)}

或者用短路求值快速判断：

{questions[currentQuestionIndex] && (
  <Question questionObject={questions[currentQuestionIndex]}></Question>
)}

3. 子组件做防御性访问，增强容错性 #

在Question组件里，使用可选链操作符（?.）来避免直接访问undefined的属性，同时可以设置默认提示：

return (
  <div className="question">
    <p>{questionObject?.["question"] || "题目加载中..."}</p>
  </div>
);

这样即使questionObject暂时是undefined，组件也不会崩溃，而是显示友好的提示内容。

4. 修正useEffect的异步写法（优化细节） #

你的useEffect直接用async作为回调函数，虽然目前能运行，但不符合React规范（React期望useEffect回调要么返回清理函数，要么不返回值）。可以改成内部定义异步函数的方式：

useEffect(() => {
  const fetchQuestions = async () => {
    try {
      const res = await fetch("http://localhost:3000/questions");
      const data = await res.json();
      setQuestions(data);
    } catch (error) {
      console.log(error);
    }
  };

  fetchQuestions();
}, []);

这个修改不会直接解决当前崩溃问题，但能避免潜在的内存泄漏或React警告。

把这些方法结合起来，你的应用就能在数据加载完成前保持稳定，同时给用户清晰的加载反馈。

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