React中Chart.js传入动态值图表不显示问题求助

你的代码里有两个核心问题导致动态传值后图表不更新：

1. 用useState存储props但未同步更新：你用useState(props.wrong)初始化内部状态，但useState只会在组件首次渲染时读取props值，后续props变化时内部状态不会自动更新，导致图表始终用初始值渲染。
2. useEffect依赖数组为空：空数组意味着useEffect只会在组件挂载时执行一次，后续props变化不会触发图表重建，自然看不到更新后的内容。

修正后的代码 #

const DoughnutChart = ({ wrong = 0, right = 0 }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    if (!chartRef.current) return;

    const data = {
      datasets: [{
        label: 'Result',
        data: [wrong, right],
        backgroundColor: [
          'rgb(255, 0, 0)',
          'rgb(0, 255, 0)',
        ],
      }]
    };

    const options = {
      plugins: {
        title: {
          display: true,
          text: 'Exam Result'
        }
      }
    };

    const myChart = new Chart(chartRef.current, {
      type: 'doughnut',
      data: data,
      options: options
    });

    return () => myChart.destroy();
  }, [wrong, right]);

  return (
    <div style={{width: 300}}>
      <canvas ref={chartRef}></canvas>
    </div>
  );
};

export default DoughnutChart;

关键修改说明 #

• 移除多余的useState：直接使用父组件传入的props值，避免状态不同步问题。同时给props设置默认值=0，防止未传值时出现异常。
• 添加正确的useEffect依赖：将wrong和right加入依赖数组，每当这两个值变化时，useEffect会自动执行：先销毁旧的图表实例，再创建新的图表，保证图表始终展示最新数据。
• 增加ref存在性检查：防止组件挂载初期ref还未绑定到canvas元素时创建图表，避免报错。

额外优化建议 #

如果图表数据或配置复杂，可以用useMemo缓存data和options对象，减少不必要的重复创建：

const data = useMemo(() => ({
  datasets: [{
    label: 'Result',
    data: [wrong, right],
    backgroundColor: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
  }]
}), [wrong, right]);

const options = useMemo(() => ({
  plugins: {
    title: {
      display: true,
      text: 'Exam Result'
    }
  }
}), []);

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