Javascript Highcharts-PieChart在单击时刷新调用this.setState的事件

我有两个来自highcharts的饼图，当我单击图表中的一个部分时，我希望任务列表显示在表中。这是我的父组件：

import React, { PureComponent, useState } from 'react';
import { Grid, Container } from 'semantic-ui-react'

import getTasks from './tasks';
import PieChart from './PieChart';
import TaskList from './TaskList';

export default class Main extends PureComponent {
    constructor() {
        super();
        this.state = { 
            group1: {
                series: getGroup1()
            },
            group2: {
                series: getGroup2()
            },
            tasks: []
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick = (e) => {
        let selectedTasks = getTasks(e.point.name)
        let { tasks } = this.state;
        tasks = selectedTasks;
        this.setState({tasks});
  }

  render() {
    const {series} = this.state;
    return (
        <Grid divided='vertically'>
            <Grid.Row columns={2}>
                <Grid.Column>
                    <PieChart 
                        data={this.state.group1}
                        handleClick={this.handleClick}
                    />
                </Grid.Column>
                <Grid.Column>
                    <PieChart 
                    data={this.state.group2}
                    handleClick={this.handleClick}
                    />
                </Grid.Column>
            </Grid.Row>
            <Container>
            <Grid.Row columns={1}>
                <Grid.Column>
                    <TaskList 
                        tasks={this.state.tasks}
                    />
                </Grid.Column>
            </Grid.Row>
            </Container>
      </Grid>
    )
  }
}

import React，{PureComponent，useState}来自'React'；
从“语义ui反应”导入{Grid，Container}
从“/tasks”导入任务；
从“/PieChart”导入PieChart；
从“/TaskList”导入任务列表；
导出默认类Main扩展PureComponent{
构造函数（）{
超级（）；
this.state={
第一组：{
系列：getGroup1（）
},
第2组：{
系列：getGroup2（）
},
任务：[]
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick=（e）=>{
让selectedTasks=getTasks（例如point.name）
设{tasks}=this.state；
任务=所选任务；
this.setState（{tasks}）；
}
render（）{
const{series}=this.state；
返回(
)
}
}

任务作为道具传递给TaskList子组件。但是，当单击饼图以触发

handleClick（）

函数时，整个图表将刷新，我假设这是因为调用

setState

时整个状态都会更新-饼图也会从

this.state.group1

和

this.state.group2

馈送数据

---

将任务数据提供给TaskList组件而不在单击时刷新整个图表的最佳方式是什么？我认为使用

setState

是最好的方法，但它似乎是在更新整个状态，而不仅仅是

任务

数组。

发生这种情况是因为您的组件状态正在更新。要解决这个问题，您需要使用

React.memo（PieChart）

包装

PieChart

组件，这将检查道具的更改并防止组件重新渲染。但请记住，检查道具更改如何与JavaScript数据类型比较示例一起工作：

{}==={} //false
[]===[] //false
"hello"==="hello"//true

---

我的PieChart组件是一个类组件。我可以将React.memo（）与类组件一起使用吗？@user1893649是的，它可以与类组件一起使用，但我建议将您的PieChart组件转换为纯组件，其工作方式与

React.memo

相同，但其对类组件的优化程度更高@user1893649，您能为我们提供

PieChart

组件的代码吗？或者在一些在线代码编辑器中重现问题，您可以从以下内容开始：