React中如何基于另一状态更新嵌套状态中的数据？

要实现根据data2的内容更新data1里的rowsData，核心是匹配data2.row与data1.rowsData.id，并更新指定列的数值，同时严格遵循React状态不可变原则。

核心实现思路 #

1. 将data2转换为以row为键的映射表，快速定位对应行的更新信息
2. 遍历data1的rowsData，判断每一行是否存在对应的更新记录
3. 存在更新则返回新的行对象（修改指定列），无更新则返回原行
4. 使用函数式状态更新确保拿到最新的state值

自动更新实现（监听data2变化） #

如果需要在data2发生变化时自动更新data1，可通过useEffect监听data2：

import { useState, useEffect } from 'react';

// 初始化数据
const tableData = {
  columnsDef: [
    { title: "id",field: "id",className: "header-style" },
    { title: "First_name", field: "First_name", className: "header-style" },
    { title: "Last_name", field: "Last_name", className: "header-style" },
    { title: "Email", field: "Email", className: "header-style" },
  ],
  rowsData:[
    { id: "1", First_name: "Donald", Last_name: "OConnell", Email: "DOCONNEL" },
    { id: "2", First_name: "Douglas", Last_name: "Grant", Email: "DGRANT" },
    { id: "3", First_name: "Jennifer", Last_name: "Whalen", Email: "JWHALEN" },
    { id: "4", First_name: "Michael", Last_name: "Hartstein", Email: "MHARTSTE" },
    { id: "5", First_name: "Pat", Last_name: "Fay", Email: "PFAY" },
    { id: "6", First_name: "Susan", Last_name: "Mavris", Email: "SMAVRIS" },
    { id: "7", First_name: "Hermann", Last_name: "Baer", Email: "HBAER" }
  ],
  file: [
    { file: { path: "dummy_data_3 .csv"}}
  ],
};

const updatedTableData = [
  { "row": 2, "column": "Email", "oldValue": "DGRANT", "newValue": "DGRANT UPDATED" },
  { "row": 6, "column": "First_name", "oldValue": "Susan", "newValue": "SUSAN UPDATED" },
  { "row": 4, "column": "Last_name", "oldValue": "Hartstein", "newValue": "Hartstein UPDATED" }
];

function App() {
  const [data1, setData1] = useState(tableData);
  const [data2, setData2] = useState(updatedTableData);

  useEffect(() => {
    // 构建更新映射表
    const updateMap = data2.reduce((map, item) => {
      map[item.row] = { column: item.column, newValue: item.newValue };
      return map;
    }, {});

    // 更新data1状态
    setData1(prevState => ({
      ...prevState,
      rowsData: prevState.rowsData.map(row => {
        // 注意row.id是字符串，需转成数字匹配data2的row值
        const rowId = parseInt(row.id, 10);
        const updateInfo = updateMap[rowId];
        
        if (updateInfo) {
          // 返回新对象，更新指定列
          return {
            ...row,
            [updateInfo.column]: updateInfo.newValue
          };
        }
        // 无更新则返回原行
        return row;
      })
    }));
  }, [data2]); // 依赖data2，变化时触发更新

  // 渲染表格示例
  return (
    <div>
      <h2>更新后的数据</h2>
      <table border="1">
        <thead>
          <tr>
            {data1.columnsDef.map(col => (
              <th key={col.field}>{col.title}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data1.rowsData.map(row => (
            <tr key={row.id}>
              <td>{row.id}</td>
              <td>{row.First_name}</td>
              <td>{row.Last_name}</td>
              <td>{row.Email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

手动触发更新（按钮点击等场景） #

如果不需要自动监听，可编写手动触发的更新函数：

const handleManualUpdate = () => {
  const updateMap = data2.reduce((map, item) => {
    map[item.row] = { column: item.column, newValue: item.newValue };
    return map;
  }, {});

  setData1(prevState => ({
    ...prevState,
    rowsData: prevState.rowsData.map(row => {
      const rowId = parseInt(row.id, 10);
      const updateInfo = updateMap[rowId];
      return updateInfo ? { ...row, [updateInfo.column]: updateInfo.newValue } : row;
    })
  }));
};

// 在组件中添加触发按钮
<button onClick={handleManualUpdate}>手动更新数据</button>

注意事项 #

• 类型匹配：data1.rowsData.id是字符串类型，data2.row是数字类型，必须转换后才能正确匹配
• 不可变性：所有状态更新都返回新的对象/数组，绝不直接修改原state，避免React状态更新异常
• 多更新处理：如果data2中存在同一行的多条更新记录，当前方案会保留最后一条；若需要合并多条更新，可修改updateMap为存储更新数组的结构，遍历数组完成多字段更新

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