javascript - 在 react-chartjs-2 中初始绘制后动画不起作用

Question

父.js

const Parent = () => {
  const data= {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
        {
            label: 'Sales',
            data: [54545, 34555, 33221, 12345, 29064, 31999],
            backgroundColor: 'transparent',
        },
        {
            label: 'Spend',
            data: [3444, 1233, 890, 42321, 678, 890],
            backgroundColor: 'transparent',
        },
        {
            label: 'Orders',
            data: [3444, 1233, 890, 42321, 678, 890],
            backgroundColor: 'transparent',
        },
        {
            label: 'Total',
            data: [3444, 1233, 890, 42321, 678, 890],
            backgroundColor: 'transparent',
        },
     ],
   }

   return(
     <Child data={data} />
   )
}

export default Parent

Child.js

const Child = (props) => {
    const [chartDataOriginal] = useState({ ...props.data })
    const [chartData, setChartData] = useState({ ...props.data })

    useEffect(() => {
        // calculate chartData based on chartDataOriginal, filter only two dataset items at a time from original chart data, 
        // change yAxisID, borderColor etc
        setChartData(calculatedData)
    }, [someState])
    
    const onChangeChartData = () => {
       // change `someState` state variable to trigger side effect
    }
    return(
      <>
       <Line data={chartData} options={options} />
       <Button onClick={onChangeChartData}>Test</Button>
      </>
    )
}
export default Child

动画在初始绘制期间工作正常，但一旦画布被渲染（线条），单击按钮时动画不再起作用。除了动画，一切看起来都很好。但是，如果我将数据从父组件移动到子组件并使用它而不是道具，那么动画效果很好。像下面的东西。

Child.js

const Child = (props) => {
    const chartDataOriginal =  {
           labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
           datasets: [
            {
                label: 'Sales',
                data: [54545, 34555, 33221, 12345, 29064, 31999],
                backgroundColor: 'transparent',
            },
            {
                label: 'Spend',
                data: [3444, 1233, 890, 42321, 678, 890],
                backgroundColor: 'transparent',
            },
            {
                label: 'Orders',
                data: [3444, 1233, 890, 42321, 678, 890],
                backgroundColor: 'transparent',
            },
            {
                label: 'Total',
                data: [3444, 1233, 890, 42321, 678, 890],
                backgroundColor: 'transparent',
           },
         ],
   }
    const [chartData, setChartData] = useState(chartDataOriginal)

    useEffect(() => {
        // calculate chartData based on chartDataOriginal, filter only two dataset items at a time from original chart data, 
        // change yAxisID, borderColor etc
        setChartData(calculatedData)
    }, [someState])
    
    const onChangeChartData = () => {
       // change `someState` state variable to trigger side effect
    }
    return(
      <>
       <Line data={chartData} options={options} />
       <Button onClick={onChangeChartData}>Test</Button>
      </>
    )
}
export default Child

我相信我失踪或不太了解，因此将不胜感激。谢谢！