React中useEffect滞后于return的map执行引发val[indx]迭代错误

问题根源 #

你的核心问题是状态val没有和后端数据dataFromBackend的变化联动：初始val长度固定为1，且未监听dataFromBackend的更新，导致后端数据行数变化时，val的长度始终不匹配，遍历后端数据时val[indx]会出现undefined，调用map就触发报错。

解决方案 #

1. 初始化val时与后端数据绑定 #

初始化val时，直接根据dataFromBackend的长度生成对应结构的数组，每个后端条目对应一个空数组（用来存储该条目下的自定义输入框值）：

const [val, setVal] = useState(() => 
  // 每个后端数据条目对应一个空数组，用于存放输入框内容
  dataFromBackend.map(() => [])
);

2. 监听dataFromBackend变化，同步更新val #

用useEffect监听dataFromBackend的变化，动态调整val的长度，确保两者始终匹配：

useEffect(() => {
  setVal(prevVal => {
    const newVal = [...prevVal];
    // 后端数据增多时，补充对应数量的空数组
    while (newVal.length < dataFromBackend.length) {
      newVal.push([]);
    }
    // 后端数据减少时，截断数组到对应长度
    if (newVal.length > dataFromBackend.length) {
      newVal.splice(dataFromBackend.length);
    }
    return newVal;
  });
}, [dataFromBackend]);

3. 正确处理输入框的增改逻辑 #

确保添加输入框或修改输入值时，正确更新val对应位置的数组：

// 给指定后端条目添加输入框
const addInput = (indx) => {
  setVal(prevVal => {
    const newVal = [...prevVal];
    // 在对应条目下新增一个空输入值
    newVal[indx] = [...newVal[indx], ''];
    return newVal;
  });
};

// 修改指定条目下的输入框值
const handleInputChange = (indx, inputIndx, value) => {
  setVal(prevVal => {
    const newVal = [...prevVal];
    newVal[indx] = newVal[indx].map((item, i) => 
      i === inputIndx ? value : item
    );
    return newVal;
  });
};

4. 渲染时的正确写法 #

渲染后端数据和对应输入框时，直接用val[indx]遍历即可，此时val长度已和后端数据匹配，不会出现undefined：

{dataFromBackend.map((item, indx) => (
  <div key={indx}>
    <p>{/* 渲染后端数据内容 */}{item.yourField}</p>
    {/* 渲染该条目下的所有输入框 */}
    {val[indx].map((inputVal, inputIndx) => (
      <input
        key={inputIndx}
        value={inputVal}
        onChange={(e) => handleInputChange(indx, inputIndx, e.target.value)}
      />
    ))}
    <button onClick={() => addInput(indx)}>添加输入框</button>
  </div>
))}

关键说明 #

之前的错误本质是状态与数据源的同步缺失——React状态不会自动跟随外部数据源变化，必须手动通过useEffect建立联动，确保val的结构和长度始终和dataFromBackend对齐，这样就不会出现val[indx]不可迭代的问题。

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