如何在React中通过State修改Chart.js数据？切换工时数据遇阻

核心问题 #

1. State覆盖问题：每次调用setUserData时只传labels或datasets，会直接替换整个userData对象，导致原有属性丢失。比如调用setUserData({ labels: ... })后，userData里只剩labels，datasets被清空，Chart.js无法正常渲染。
2. Datasets结构错误：注释代码把datasets设成了单个对象{ data: ... }，但Chart.js要求datasets是数组类型（原state里也是数组）。对象没有map方法，因此抛出nextDatasets.map is not a function错误。

修复后的代码 #

const [userData, setUserData] = useState({
  labels: Object.keys(daysData),
  datasets: [
    {
      label: "Hours worked",
      data: Object.values(daysData),
      backgroundColor: "red",
      borderColor: "black",
      borderWidth: 2,
    },
  ],
});

const onShowWeeklyHandler = () => {
  // 基于原state更新，保留不需要修改的配置
  setUserData(prevState => ({
    ...prevState,
    labels: Object.keys(daysData),
    datasets: [
      {
        ...prevState.datasets[0], // 保留原样式配置
        data: Object.values(daysData) // 更新工时数据
      }
    ]
  }));
};

const onShowMonthlyHandler = () => {
  setUserData(prevState => ({
    ...prevState,
    labels: Object.keys(monthsData),
    datasets: [
      {
        ...prevState.datasets[0],
        data: Object.values(monthsData)
      }
    ]
  }));
};

关键说明 #

• 使用函数式更新（prevState => ...）确保每次更新基于最新的state值，避免状态冲突。
• 通过扩展运算符...保留原state中无需修改的属性（比如数据集的颜色、边框样式），只更新labels和data部分。
• 严格保持datasets的数组结构，仅修改数组内第一个对象的data属性，符合Chart.js的要求。

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