Reactjs Highcharts react（堆叠图表）未正确更新序列

我对highcharts在更改堆叠条形图的系列数据时遇到问题 我想做的是：我制作了一个堆叠的条形柱形图，我有3个按钮用于根据按钮点击过滤数据

    const dropoutByEthnicityOptions = {
            chart: {
                type: 'bar',
                style: {
                    fontFamily: 'HelveticaNowText-Regular',
                    color: "#607D8B"
                },
                height: $(window).width() > 991 ? 450 : 350
            },
            title: {
                text: 'Dropout by Ethnicity',
                align: 'left',
            },
            xAxis: {
                categories: ['Albanian','Serbian', 'Turkish', 'Bosnian', 'Gorani', 'Ashkali', 'Roma', 'Egyptian'],
                labels: {
                    style: {
                        color: '#607D8B',
                        fontSize: '14px'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: null
                }
            },
            legend: {
                reversed: true,
                align: 'right',
                verticalAlign: 'top',
                floating: true
            },
            tooltip: {
                valueSuffix: undefined
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    pointWidth: 20
                }
            },
            colors: ['#2CD9C5','#60F1C8', '#A4F7CC','#D7FBE8'],
            series: this.state.showBasedOnGenderClicked ? this.state.genderData : this.state.totalStudents
        };

        const dropoutByGradeOptions = {
            chart: {
                type: 'bar',
                style: {
                    fontFamily: 'HelveticaNowText-Regular',
                    color: "#607D8B"
                },
                height: $(window).width() > 991 ? 500 : 400
            },
            title: {
                text: 'Dropout by Grade',
                align: 'left',
            },
            xAxis: {
                categories: ['Grade 1','Grade 2', 'Grade 3', 'Grade 4', 'Grade 5', 'Grade 6', 'Grade 7', 'Grade 8', 'Freshman', 'Sophomore', 'Junior', 'Senior', '13th Grade'],
                labels: {
                    style: {
                        color: '#607D8B',
                        fontSize: '14px'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: null
                }
            },
            legend: {
                reversed: true,
                align: 'right',
                verticalAlign: 'top',
                floating: true
            },
            tooltip: {
                valueSuffix: '%'
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    pointWidth: 20
                }
            },
            colors: ['#426660', '#2a4d48', '#225c55', '#32968b','#2ca89a', '#24bdab','#1bdec7','#0afce0'],
            series: this.state.dropoutByGrade
        };

我打电话给Highcharts：

{!this.state.totalDropoutByGradeClicked ? 
<div>
    <HighchartsReact highcharts={Highcharts} options={dropoutByEthnicityOptions} />
</div>
:
<div>
    <HighchartsReact highcharts={Highcharts} options={dropoutByGradeOptions} />
</div> }

{！单击this.state.totalDropoutByGrade？
:
}

问题在于，当我第一次单击按钮时，序列数据正确，但在我第二次单击其中一个按钮后，数据没有正确更改。

这是我在单击按钮时设置序列数据状态的代码：

<div className="filter-box">
    <button class={this.state.totalDropoutByGradeClicked ? "active" : ""} onClick={this.onDropoutGradesClicked}>Total Dropout by grade</button>
    <button class={this.state.totalStudentsByEthnicityClicked ? "active" : ""} onClick={this.onTotalStudentsClicked}>Total Students by ethnicity</button>
    <button class={this.state.showBasedOnGenderClicked ? "active" : ""} onClick={this.onGenderClicked}>Dropouts by Gender & Ethnicity</button>
</div>

    onDropoutGradesClicked = () => {
        this.setState({
            totalDropoutByGradeClicked: true,
            totalStudentsByEthnicityClicked: false,
            showBasedOnGenderClicked: false,
        })
    }

    onGenderClicked = () => {
        this.setState({
            data: this.state.genderData,
            totalDropoutByGradeClicked: false,
            totalStudentsByEthnicityClicked: false,
            showBasedOnGenderClicked: true
        });
    }

    onTotalStudentsClicked = () => {
        this.setState({
            data: this.state.totalStudents,
            totalDropoutByGradeClicked: false,
            totalStudentsByEthnicityClicked: true,
            showBasedOnGenderClicked: false
        });
    }

按年级分列的辍学总人数
按种族划分的学生总数
按性别和族裔分列的辍学者
OnDropOutgrade单击=（）=>{
这是我的国家({
TotalDropoutByGrade单击：真，
TotalStudentsBythNicitCyclicked:错误，
showBasedOnGenderClicked:错误，
})
}
onGenderClicked=（）=>{
这是我的国家({
数据：this.state.genderData，
TotalDropoutByGrade单击：false，
TotalStudentsBythNicitCyclicked:错误，
showBasedOnGenderClicked：正确
});
}
onTotalStudentsClicked=（）=>{
这是我的国家({
数据：this.state.totalStudents，
TotalDropoutByGrade单击：false，
TotalStudentsBythnicitCyclicked:对，
showBasedOnGenderClicked:错误
});
}

您能在我可以使用的在线编辑器上重现您的问题吗？您可以从此模板开始：