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

【问题标题】：rerender component when my state change state in ReactJS当我的状态在 ReactJS 中改变状态时重新渲染组件
【发布时间】：2019-08-08 16:57:04
【问题描述】：

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

请看我的方法appendTable setstateboolean为false，当这个结束操作时，setStateboolean为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} />
...
    );

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

你可以添加方法 shouldComponentUpdate():

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

它现在应该仅在更新布尔属性时重新渲染。

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

【讨论】：