ReactJS状态变量未更新，访问JSON数组元素报错

1. 初始状态未正确初始化 #

如果tutorDetails的初始值设为{}、null或者undefined，组件首次渲染时tutorDetails.subjects会是undefined，此时访问subjects[0]自然会抛出'0' is undefined的错误。

解决方式：给tutorDetails设置包含空数组的初始状态，确保subjects始终是数组类型：

const [tutorDetails, setTutorDetails] = useState({ subjects: [] });

2. 异步数据加载时的未就绪状态 #

如果tutorDetails是通过异步请求（比如API调用）获取的，组件首次渲染时数据还未返回，此时tutorDetails还是初始值，直接访问subjects[0]会报错。

解决方式：使用可选链操作符或者条件渲染规避未就绪状态：

• 可选链写法：

// 当subjects不存在或为空时，返回undefined，避免报错
const firstSubject = tutorDetails.subjects?.[0];

• 条件渲染写法：

{tutorDetails.subjects && tutorDetails.subjects.length > 0 && (
  <div>第一个科目：{tutorDetails.subjects[0]}</div>
)}

3. 状态更新违反不可变性原则 #

React状态是不可变的，如果直接修改tutorDetails的原对象再调用setTutorDetails，React可能无法检测到状态变化，导致tutorDetails.subjects看似存在但实际未更新。

错误示例：

// 直接修改原对象，React无法感知更新
tutorDetails.subjects = ["Linear Algebra", "Calculus"];
setTutorDetails(tutorDetails);

正确写法：返回新的对象引用，确保React能检测到状态变化：

// 展开原对象，替换subjects属性，生成新对象
setTutorDetails(prev => ({
  ...prev,
  subjects: ["Linear Algebra", "Calculus"]
}));

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