React父组件state更新时，子组件BarChart的state未同步变更问题

问题根因 #

• App组件修改state的方式不符合React规范：React类组件不允许直接修改state值，必须通过setState方法触发状态更新，你直接写this.state.tabEff = value不会触发组件重渲染，子组件自然也无法拿到更新后的props。
• BarresChart组件做了多余的props到state的拷贝：constructor仅在组件第一次初始化时执行一次，后续父组件传递的tabEff props更新时，BarresChart自身的state不会同步更新，导致永远显示初始值。
• BarresChart渲染逻辑存在语法错误：你传递的tabEff是数组类型，直接取this.state.tabEff.data、this.state.tabEff.name会拿到undefined，这些属性是数组内元素的属性，不是数组本身的。

修复代码 #

1. 修复App组件的state更新逻辑 #

handleClick = (value) => {
  this.setState({
    tabEff: value
  }, () => {
    console.log(this.state.tabEff)
  })
}

2. 修复BarresChart组件，直接使用props无需额外存state #

import React, { Component } from 'react';
import { BarChart, Bar, XAxis, YAxis } from 'recharts';

class BarresChart extends React.Component {
  render() {
    const { tabEff } = this.props;
    if (!tabEff || tabEff.length === 0) return <div>暂无数据</div>
    
    return (
      <div>
        <BarChart width={400} height={400} data={tabEff} >
          <YAxis />
          <XAxis dataKey="name" />
          {tabEff.map((obj, index) => (
            <Bar key={index} dataKey={obj.dataKey} fill={obj.fill} />
          ))}
        </BarChart>
      </div>
    )
  }
}

export default BarresChart;

内容的提问来源于stack exchange，提问作者Sophia