React中useState初始化后取值异常：调用initFeatures时出现Cannot read properties of undefined (reading 'features')错误

你遇到的这个错误是因为React的setState是异步操作——当你在getMedicalProblem里调用setMedicalProblem(results)后，medicalProblem这个state并不会立刻更新。紧接着调用initFeatures(0)时，medicalProblem还是初始的空数组[]，访问medicalProblem[0]自然会得到undefined，再去读取它的features属性就会抛出错误。

这里提供几种可行的解决思路，你可以根据自己的代码习惯选择：

方案一：直接使用API返回的结果（最推荐） #

既然在API的then回调里已经拿到了完整的results数据，完全不需要依赖还没更新的state，直接用results来处理即可：

const getMedicalProblem = () => {
  api
  .get("dental/generic/slideshow/medical-problem/")
  .then((res: any) => {
    const { count, results } = res
    setMedicalProblem(results)
    // 先判断结果数组是否有数据，避免空数组报错
    if (results.length > 0) {
      // 拷贝一份数据再排序，避免直接修改原API返回值
      const mfeatures = [...results[0].features]
      mfeatures.sort((a, b) => a.order - b.order)
      setFeatures(mfeatures)
    }
  })
  .catch((err) => { 
    // 建议在这里添加错误处理，比如打印错误提示用户
    console.error("获取医疗问题数据失败：", err)
  });
};

这种方式跳过了state更新的异步等待，直接使用已有数据，逻辑更直接高效。

方案二：给initFeatures传递参数，不依赖state #

如果你想保留initFeatures函数的复用性，可以让它直接接收需要处理的features数据，而不是从state里读取：

// 修改initFeatures函数
const initFeatures = (featuresData?: any[]) => {
  // 先判断传入的数据是否有效
  if (!featuresData || featuresData.length === 0) return
  const mfeatures = [...featuresData]
  mfeatures.sort((a, b) => a.order - b.order)
  setFeatures(mfeatures)
}

// 修改getMedicalProblem里的调用逻辑
const getMedicalProblem = () => {
  api
  .get("dental/generic/slideshow/medical-problem/")
  .then((res: any) => {
    const { count, results } = res
    setMedicalProblem(results)
    if (results.length > 0) {
      initFeatures(results[0].features)
    }
  })
  .catch((err) => { 
    console.error("获取医疗问题数据失败：", err)
  });
};

方案三：用useEffect监听medicalProblem的变化 #

如果你的业务逻辑必须依赖state更新后的medicalProblem，可以新增一个useEffect来监听它的变化，当state更新完成后再执行initFeatures：

// 原有的触发API请求的useEffect保留
useEffect(() => { 
  getMedicalProblem() 
}, []);

// 新增监听medicalProblem变化的useEffect
useEffect(() => {
  // 当medicalProblem有数据时才执行
  if (medicalProblem.length > 0) {
    initFeatures(0)
  }
}, [medicalProblem]) // 依赖项设为medicalProblem，当它变化时触发

// 修改initFeatures，添加边界判断
const initFeatures = (index: number) => {
  const targetProblem = medicalProblem[index]
  // 先判断目标项是否存在
  if (!targetProblem) return
  const mfeatures = [...targetProblem.features]
  mfeatures.sort((a, b) => a.order - b.order)
  setFeatures(mfeatures)
}

不管用哪种方案，都一定要添加边界判断（比如检查数组长度、判断对象是否存在），这样即使API返回空数组或者异常数据，也不会导致页面崩溃。

内容的提问来源于stack exchange，提问作者S.M_Emamian