React中突发Cannot read properties of undefined (reading 'indexOf')错误求助

错误根源 #

你遇到的这个错误，核心原因是completed状态没有被初始化为数组类型。从你提供的代码来看，只初始化了activeStep，但completed的useState定义缺失，默认会是undefined。而indexOf是数组专属方法，当代码其他位置调用completed.indexOf(...)时，就会因completed为undefined抛出错误。

另外，你当前handleStepForward函数里使用了[...prevCompleted]，这也要求prevCompleted必须是数组，否则扩展undefined也会引发潜在错误。

修复步骤 #

1. 正确初始化completed状态
   在组件中添加completed的状态初始化，设为空数组：

   const [completed, setCompleted] = useState([]);
   

   这是最关键的一步，确保completed从一开始就是数组类型，后续调用数组方法（如indexOf）或扩展运算符都不会出错。

2. 验证所有completed相关逻辑
   检查代码中所有用到completed的地方，确保都是以数组方式操作。比如判断步骤是否完成的逻辑completed.indexOf(activeStep) !== -1，现在就能正常执行。

3. 优化handleStepForward状态更新（可选）
   虽然当前代码写法没问题，但可以提取当前步骤值，让逻辑更清晰：

   const handleStepForward = () => {
     const currentStep = parseInt(activeStep);
     if (currentStep <= 4) {
       setActiveStep((currentStep + 1).toString());
       setCompleted(prev => [...prev, activeStep]);
     }
   };
   

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