如何修改包含对象的React多维数组类型状态？

要实现点击按钮修改指定数据的功能，核心是遵循React的状态不可变原则——不能直接修改原状态对象/数组，必须通过创建新副本的方式更新状态，这样才能触发组件重新渲染。

以下是修改后的handleClick实现及完整代码：

import React, { useState } from "react";
import { stackedCustomSeries } from "../../data/dummy";

const App = () => {
  const [customSeries, setCustomSeries] = useState(stackedCustomSeries);

  const handleClick = () => {
    // 基于当前状态创建新副本，用函数式更新确保状态最新
    setCustomSeries(prevSeries => 
      prevSeries.map((series, idx) => {
        // 仅处理第一个series（对应stackedChartData[0]）
        if (idx !== 0) return series;
        
        // 遍历dataSource，找到x为'Jan'的项并更新y值
        const updatedDataSource = series.dataSource.map(item => 
          item.x === 'Jan' ? { ...item, y: 120 } : item
        );
        
        // 返回新的series对象，替换原dataSource
        return { ...series, dataSource: updatedDataSource };
      })
    );
  };  

  return (          
    <div className="m-5">
      <button type="button" onClick={handleClick}>
        ChangeButton
      </button>         
    </div>
  );
};

export default App;

关键细节说明： #

• 不可变更新：使用扩展运算符{...series}和{...item}创建新对象，避免直接修改原状态引用；用map生成新数组，而非直接修改原数组。
• 函数式更新：setCustomSeries(prevSeries => ...)确保我们基于最新的状态进行修改，避免因异步状态更新导致的错误。
• 精准定位修改：通过idx !== 0锁定第一个series，再通过item.x === 'Jan'找到目标数据项，只更新需要修改的y值，其余数据保持不变。

如果需要修改其他月份或第二个series的数据，只需调整对应的判断条件即可。

内容的提问来源于stack exchange，提问作者Milán Nikolics