Highcharts

Question

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

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

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

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

Answer 1

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

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

Highcharts - PieChart 在调用 this.setState 的点击事件上刷新

Highcharts - PieChart refreshes on click event that calls this.setState

javascript

onclick

setstate

reactjs