当我的状态在ReactJS中更改状态时重新渲染组件

Question

我的React-Redux应用程序中有一个特定的问题。 因此，当我的this.state.boolean值更改时，我将显示重新渲染组件。 几行代码表示一千多个单词：

请查看我的方法appendTable setstate boolean为false，当此操作结束时，setState boolean为true。 我只想在布尔状态更改状态后才重新渲染组件。

class TableComponent extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      columnStatic: [{ name: "customerName", title: "Client" }],
      columnsDynamic: [],
      columnBands: [],
      columns: [],

      tableColumnExtensions: [],
      percentColumns: [],
      boolean: true
    };

    this.handleDateWeek = this.handleDateWeek.bind(this);
    this.appendTable = this.appendTable.bind(this);
    this.Auth = new AuthService();
  }

  componentDidMount() {
    this.handleDateWeek();
  }

  componentDidUpdate(prevProps) {
    if (
      this.props.isLoading === false &&
      prevProps.isLoading !== this.props.isLoading
    )
      this.appendTable();
  }

  handleDateWeek() {
    this.props.handleLastWeek(this.props.dateFrom, this.props.dateTo);
  }

  appendTable() {
    this.setState(
      {
        columnStatic: [{ name: "customerName", title: "Klient" }],
        columnsDynamic: [],
        columnBands: [],
        columns: [],
        tableColumnExtensions: [],
        percentColumns: [],
        boolean: false
      },
      () => {
        var i = 1;
        var j = 1;
        var k = 1;
        var l = 0;
        var dateArray = [];

        this.props.dataApi.map(dA => {
          dA.data.map(dat => {
            if (dateArray.indexOf(dat.date) > -1) {
              return;
            }
            dateArray.push(dat.date);

            this.setState(prevState => ({
              columnsDynamic: [
                ...prevState.columnsDynamic,
                { name: "ordersAmount" + i++, title: "Zamówienia" },
                { name: "earnings" + i++, title: "Obrót (brutto)" }
              ],

              columnBands: [
                ...prevState.columnBands,
                {
                  title: `${dat.date}`,
                  children: [
                    { columnName: "ordersAmount" + j++ },
                    { columnName: "earnings" + j++ }
                  ]
                }
              ],

              percentColumns: [
                ...prevState.percentColumns,
                `ordersAmount${l++ % 2 != 0 ? l : l++}`
              ],

              tableColumnExtensions: [
                ...prevState.tableColumnExtensions,
                {
                  columnName: "ordersAmount" + k++,
                  width: 90,
                  align: "right"
                },
                {
                  columnName: "earnings" + k++,
                  width: 150,
                  align: "right"
                }
              ],

              boolean: true
            }));
          });
        });
      }
    );
  }

...

    return (
      <Fragment>
        <div className="tableContainerHead">
          {this.props.isLoading ? (
<Loading />
          ) : (
            <Fragment>
                <Grid
                  rows={dataApi}
                  columns={columns.concat(columnStatic, columnsDynamic)}
                >
                  <PercentTypeProvider for={percentColumns} />
...
    );

Answer 1

您可以添加方法shouldComponentUpdate（）：

shouldComponentUpdate(nextProps, nextState) {
  return (nextState.boolean !== this.state.boolean) ? true : false;
}

现在，仅当boolean属性已更新时，它才应该重新渲染。

但我建议您更改该属性的名称，因为Boolean是保留关键字，并且非常接近。 也许在语义上更具描述性？