React state更新时AssetsTable重渲染但CryptoPieChart不刷新问题求助

你的AssetsTable组件渲染时直接读取传入的Assets props，父组件state更新后传入新的props，每次render都会用最新值，所以可以正常更新。
而CryptoPieChart组件只在首次挂载执行constructor时调用了一次RecreateDataArray生成图表数据存在自身state里，后续父组件传入新的Assets props时，没有触发重新生成图表数据的逻辑，所以图表不会更新。

两种可选方案，推荐优先用第二种更简洁：

方案1：添加componentDidUpdate生命周期监听props变化 #

在CryptoPieChart类中添加以下生命周期方法，检测到Assets props变化时重新生成图表数据：

async componentDidUpdate(prevProps) {
  // 只有Assets发生变化时才重新生成数据，避免无限更新
  if (prevProps.Assets !== this.props.Assets) {
    await this.RecreateDataArray();
  }
}

注意：父组件更新Assets state时请确保返回的是新数组（比如用setState({Assets: [...newAssets]})而不是直接修改原数组后赋值），否则浅比较会认为props没有变化，不会触发componentDidUpdate。

方案2：移除组件内部state，直接通过props计算图表数据（更推荐） #

不需要把图表数据存在子组件自身state，直接在render时用最新的props计算即可，省去手动监听props的逻辑：
修改后的CryptoPieChart代码如下：

import React from "react";
import Chart from "react-google-charts";
import { getScrtProvider } from "../../apis/scrt";

class CryptoPieChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      wallet: null
    };
  }

  async componentDidMount() {
    // 钱包地址只需要获取一次，无需每次更新都调用
    const wallet = await getScrtProvider();
    this.setState({ wallet });
  }

  // 直接在render里计算图表数据，不用存state
  getChartData() {
    const { wallet } = this.state;
    const { Assets } = this.props;
    if (!wallet) return [];
    const dataArray = [["symbol", "value"]];
    Assets.forEach(asset => {
      if (asset.address !== wallet.address) return;
      const totalValue = asset.current_price * asset.quantity;
      dataArray.push([asset.symbol, totalValue]);
    });
    return dataArray;
  }

  render() {
    const chartData = this.getChartData();
    return (
      <Chart
        width={"300px"}
        height={"300px"}
        chartType="PieChart"
        loader={<div>Loading Chart</div>}
        data={chartData}
        options={{
          legend: "none",
          pieSliceText: "label",
          colors: [
            "#024678",
            "#8accfd",
            "#7CB7E3",
            "#6EA3CA",
            "#608EB1",
            "#527A97",
            "#45657E",
            "#375165",
          ],
          backgroundColor: {
            fill: "#000000",
            fillOpacity: 0.0,
          },
        }}
        rootProps={{ "data-testid": "5" }}
      />
    );
  }
}

export default CryptoPieChart;

这个方案避免了子组件内部维护和props重复的状态，减少了不同步的风险，代码逻辑更清晰。

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