javascript - React chart.js 动态数据不更新

Question

我看不到甜甜圈，因为数据仅在保存 (cntrl+s) 后才设置为 [0,0,0]，它会再次使用所需值呈现并显示甜甜圈。我正在使用 redux 商店，一切都在使用代码和操作。编码：

import { Component } from 'react';
import { Doughnut } from 'react-chartjs-2';
import { connect } from 'react-redux';
import { loadToys, removeToy } from '../store/Actions/toyActions'
class _Dashboard extends Component {
    state = {
        data: null
    }
   componentDidMount() {
        this.props.loadToys()
        this.onLoad()
    }
    onLoad = () => {
        const adult = this.props.toys.filter(toy => toy.type === 'Adult').length
        const funny = this.props.toys.filter(toy => toy.type === 'Funny').length
        const educational = this.props.toys.filter(toy => toy.type === 'Educational').length
        this.setState({
            data: {
                labels: ['Adult', 'Funny', 'Educational'],
                datasets:
                    [{
                        backgroundColor: [
                            'rgb(255, 99, 132)',
                            'rgb(54, 162, 235)',
                            'rgb(255, 205, 86)'
                        ],
                        hoverOffset: 4
                        ,
                        data: [adult, funny, educational]
                    }
                    ]

            }
        })
    }
    render() {
        return (
            <div> <h1>Toys by type</h1>
                <Doughnut
                    data={this.state.data}
                    redraw
                />
            </div >
        );
    }
}
const mapGlobalStateToProps = (state) => {
    return {
        toys: state.toyModule.toys
    }
}
const mapDistpatchToProps = {
    loadToys,
    removeToy
}
export const Dashboard = connect(mapGlobalStateToProps, mapDistpatchToProps)(_Dashboard)