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

Question

I have a specific problem in my React-Redux app. so I display rerender my component, when my this.state.boolean change value. A few lines of code express more than a thousand words:

Please look on my method appendTable setstate boolean to false, and when this end operations, setState boolean to true. I would like to rerender my component only then my boolean state changing state.

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

You could add the method shouldComponentUpdate():

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

It should now re-render only when the boolean property has been updated.

I suggest you change the name of that property though, as Boolean is a reserved keyword and it is very close. Perhaps something more semantically descriptive?