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

问题描述

Parent.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],{
            label: 'Orders',{
            label: 'Total',],}

   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',datasets: [
            {
                label: 'Sales',{
                label: 'Spend',{
                label: 'Orders',{
                label: 'Total',}
    const [chartData,setChartData] = useState(chartDataOriginal)

    useEffect(() => {
        // calculate chartData based on chartDataOriginal,[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

我相信我失踪了或不太了解，所以任何帮助将不胜感激。谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）