如何使用 React state 改变 Chart.js 数据？

Question

在我的项目中，我希望在两组数据之间切换：当周每天工作的总小时数，以及当年每个月的总工作小时数。 我能够在我的按钮处理程序中实现 Chart.js label 操作，但我无法修改状态的数据属性。 我在这里想念什么？ 感谢您的帮助。

注意：注释的代码在未注释时会产生此错误语句： Uncaught TypeError: nextDatasets.map is not a function

LineChart.js

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

  const onShowWeeklyHandler = () => {
    setUserData({ labels: Object.keys(daysData) });
    // setUserData({ datasets: { data: Object.keys(daysData) } });
  };

  const onShowMonthlyHandler = () => {
    setUserData({ labels: Object.keys(monthsData) });
    // setUserData({ datasets: { data: Object.keys(monthsData) } });
  };

Answer 1

您可能会遇到问题，因为您尝试将 state 与 useState 挂钩进行浅层合并。 React 不支持这个。 有关更多信息，请参阅此答案。

如果那不能解决您的问题，您是否研究过 react-chartjs-2 ？ 您可能可以通过以下方式实现您想要的目标。

在您的父组件（包含图表的组件）中：

import { Bar } from "react-chartjs-2"; // import whatever chart type you need
...

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

那么你的处理程序可以是：

  const onShowWeeklyHandler = () => {
    setUserData({
      ...userData,
      datasets: {
        ...userData.datasets,
        labels: Object.keys(daysData),
        data: Object.values(daysData),
      },
    });
  };

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

最后：

return <Bar data={userData.datasets} />; // adapt for whatever chart type you need