一个组件未在 state 更改上重新渲染，而其他组件则没有

Question

我正在尝试在单击按钮时更新两个子组件。 由于我将函数传递给子组件，因此我可以更改 state。 但问题是 state 更改并未反映在两个子组件上。 <AssetsTable/>在 state 上发生变化，而<CryptoPieChart/>没有变化

      <Card>
        <CardBody>
          <div className="block w-full ">
            {this.state.Assets.length > 0 ? (
              <div className="grid ml-8 md:grid-cols-2 items-center">
                <div className="min-w-0">
                  <AssetsTable
                    Assets={this.state.Assets}
                    onDelete={this.onDeleteAsset}
                    onRefresh={this.onRefreshAsset}
                  />
                </div>
                <div className="mx-2 flex flex-col items-center min-w-0">
                  <p className="text-xl font-semibold text-gray-800 dark:text-gray-300">
                    Token Distribution
                  </p>
                  <CryptoPieChart
                    className="w-full"
                    Assets={this.state.Assets}
                  />
                </div>
              </div>
            ) : (
              ""
            )}
          </div>
        </CardBody>
      </Card>

<AssetTable/>代码

import React from "react";

import {
  Table,
  TableCell,
  TableBody,
  TableRow,
  TableContainer,
  Button,
} from "@windmill/react-ui";
import { EditIcon, TrashIcon, RefreshIcon } from "../../icons";

class AssetsTable extends React.Component {
  constructor(props) {
    super(props);
  }

  async componentDidMount() {}

  render() {
    return (
      <>
        <TableContainer className="mb-8">
          <Table>
            <TableBody>
              {this.props.Assets.map((asset, i) => (
                <TableRow key={i}>
                  <TableCell className="">
                    <div className="flex items-center text-sm border-0">
                      <div className="relative rounded-full inline-block w-8 h-8 hidden mr-3 md:block">
                        <img
                          className="object-cover  rounded-circle circular-square "
                          src={asset.image}
                          alt="asset"
                          loading="lazy"
                        />
                        <div
                          className="absolute inset-0 rounded-full"
                          aria-hidden="true"
                        ></div>
                      </div>
                      <div>
                        <div className="font-semibold ">{asset.symbol}</div>
                        <p className="text-xs text-gray-600 dark:text-gray-400">
                          {asset.quantity} {asset.symbol}
                          {" * "}
                          {asset.current_price}
                        </p>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <span className="text-sm">$ {asset.usdValue}</span>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center space-x-4">
                      <Button
                        layout="link"
                        size="icon"
                        aria-label="Edit"
                        value={i}
                        onClick={this.props.onRefresh}
                      >
                        <RefreshIcon className="w-5 h-5" aria-hidden="true" />
                      </Button>

                      {i > 0 ? (
                        <Button
                          layout="link"
                          size="icon"
                          aria-label="Delete"
                          value={i}
                          onClick={this.props.onDelete}
                        >
                          <TrashIcon className="w-5 h-5" aria-hidden="true" />
                        </Button>
                      ) : null}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </>
    );
  }
}

export default AssetsTable;

<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 = {
      chartData: [],
    };

    this.RecreateDataArray();
  }

  async RecreateDataArray() {
    const wallet = await getScrtProvider();

    let dataArray = [];
    let total = this.props.Assets.length;
    let i;
    dataArray.push(["symbol", "value"]);
    for (i = 0; i < total; ++i) {
      if (this.props.Assets[i].address !== wallet.address) {
        continue;
      }
      let totalValue =
        this.props.Assets[i].current_price * this.props.Assets[i].quantity;
      dataArray.push([this.props.Assets[i].symbol, totalValue]);
    }

    this.setState({ chartData: dataArray });
  }

  render() {
    return (
      <Chart
        width={"300px"}
        height={"300px"}
        chartType="PieChart"
        loader={<div>Loading Chart</div>}
        data={this.state.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;

我看不出有什么不同。 请帮忙

Answer 1

您只在组件挂载时调用RecreateDataArray ，而不是在 props 更改时调用。

这就是为什么当你的道具改变时它不会更新。

您可以使用componentWillUpdate生命周期方法进行更新，但只需重构为 function 组件并使用useEffect挂钩会容易得多：

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

async function RecreateDataArray(assets) {
  const wallet = await getScrtProvider();

  let dataArray = [];
  let total = assets.length;
  let i;
  dataArray.push(["symbol", "value"]);
  for (i = 0; i < total; ++i) {
    if (assets[i].address !== wallet.address) {
      continue;
    }
    let totalValue = assets[i].current_price * assets[i].quantity;
    dataArray.push([assets[i].symbol, totalValue]);
  }
  return dataArray;
}

function CryptoPieChart({ Assets }) {
  const [chartData, setChartData] = React.useState([]);
  React.useEffect(() => {
    RecreateDataArray(Assets).then(setChartData);
  }, [Assets]);

  return (
    <Chart
      width={"300px"}
      height={"300px"}
      chartType="PieChart"
      loader={<div>Loading Chart</div>}
      data={this.state.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;