React函数组件中嵌套数组数据更新问题咨询

我来帮你搞定这个同步更新数组的问题！你现在的核心需求是修改表单输入时，同时更新single状态和data数组里对应的项，关键是要遵循React状态不可变性的原则——不能直接修改原数组或对象，得创建新的副本更新状态。

先优化选中项的逻辑（可选但强烈推荐） #

你之前用数组索引来选中项，要是后续数组有增删操作，索引很容易失效，建议改用每个项自带的id来处理，稳定性高很多：

// 列表渲染时传item的id，而不是索引
{data.map(d => (
  <li key={d.id} onClick={() => handleOnClick(d.id)}>
    {d.name}
  </li>
))}

// 更新点击处理函数，通过id精准找到选中项
const handleOnClick = (itemId) => {
  const selectedItem = data.find(item => item.id === itemId);
  if (selectedItem) {
    setSingle(selectedItem);
  }
};

核心：实现输入变更的同步更新 #

接下来就是handleInputChange的写法了，我们要同时更新single和data数组，而且要利用React的函数式更新来避免异步状态的坑：

const handleInputChange = e => {
  const newName = e.target.value;
  
  // 1. 更新single状态：基于上一次的single值创建新对象
  setSingle(prevSingle => ({ ...prevSingle, name: newName }));
  
  // 2. 更新data数组：遍历数组，找到对应id的项替换成新对象，保持数组不可变
  setData(prevData => 
    prevData.map(item => 
      item.id === single.id ? { ...item, name: newName } : item
    )
  );
};

为啥这么写？ #

• 不可变性原则：用扩展运算符...创建新对象和数组，没有直接修改原状态，React能准确检测到状态变化并触发组件重新渲染。
• 函数式更新：setSingle(prev => {...})和setData(prevData => {...})能确保我们拿到的是最新的状态值，不会因为setState的异步特性用到旧状态，避免出现更新不同步的问题。

这样改完之后，你修改输入框的name值时，single会实时更新，data数组里对应的项也会同步跟着变，完美解决你的问题！

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