如何在useState嵌套数组中更新对象值且不新增多余索引？

问题原因 #

你在更新嵌套state时，没有遵循React的不可变更新原则：要么直接修改了原state对象（导致引用未变化，React无法正确识别更新，进而出现异常数组结构），要么处理数组时错误添加了新元素。

正确的更新方式 #

要更新query[0].rules[0].fN的值，必须逐层深拷贝对象和数组，确保只修改目标字段，保留原数组结构：

import { useState } from 'react';

function App() {
  const [data, setData] = useState({
    query: [
      {
        com: "",
        id: 1,
        rules: [{ fN: "tej", sN: "raj" }]
      },
      {}
    ]
  });

  const updateFN = (newValue) => {
    setData(prevState => ({
      // 拷贝外层对象
      ...prevState,
      query: prevState.query.map((item, idx) => {
        // 定位到需要修改的query项（这里取第一个，也可通过item.id === 1判断）
        if (idx === 0) {
          return {
            // 拷贝当前query项
            ...item,
            // 拷贝rules数组并修改目标元素
            rules: item.rules.map(rule => ({
              ...rule,
              fN: newValue
            }))
          };
        }
        // 其他项直接返回原对象，不做修改
        return item;
      })
    }));
  };

  return (
    <div>
      <input
        type="text"
        value={data.query[0].rules[0].fN}
        onChange={(e) => updateFN(e.target.value)}
      />
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

关键说明 #

• 永远不要直接修改prevState里的嵌套对象/数组，必须通过**展开运算符（...）**或map创建新引用。
• map函数中，只对需要修改的数组项进行拷贝更新，其他项直接返回原对象，确保数组结构不变。
• 这种方式既保证了state的不可变性，又精准修改了目标值，不会出现意外新增索引的问题。

内容的提问来源于stack exchange，提问作者Tejendra Singh Rajawat