Highcharts-PieChart在调用this.setState的click事件上刷新。

Question

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

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>
    )
  }
}

任务作为道具传递到TaskList子组件。但是，单击饼图以触发handleClick()功能时，整个图表都会刷新，我假设是因为调用setState时整个状态都已更新-饼图也从this.state.group1和this.state.group2。 

单击任务时将任务数据馈送到TaskList组件而不刷新整个图表的最佳方法是什么？我以为使用setState是最好的方法，但是看起来它正在更新整个状态，而不仅仅是task数组。

我有两个来自图表的饼图，当我单击图表中的一个切片时，我希望在列表中显示一个任务列表。这是我的父组件：import React，{PureComponent，...

Answer 1

发生这种情况是因为您的组件状态正在更新。为了解决这个问题，您需要用PieChart包装React.memo(pieChart)组件，这将检查道具更改并防止重新渲染组件。但是请记住，检查道具更改如何与JavaScript数据类型比较示例一起使用：