Question

我的React-Redux应用程序中有一个特定的问题。我使用Redux-saga与REST API进行通信，因此Redux-saga不会返回承诺。

在我的应用程序中，我还使用了状态（除了商店），在收到Redux-saga的SUCCESS响应后，我想更改状态。

当redux-saga成功执行时，我的方法this.props.handleLastWeek(this.props.dateFrom, this.props.dateTo)返回：this.props.isLoading：false和this.props.dataApi。

所以我想在appendTable()返回this.props.isLoading false并且this.props.dataApi不为null时运行方法this.props.handleLastWeek。

PS：purecomponent不是问题吗？

我的代码如下：

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

    this.state = {
      ...
    };

    this.handleDateWeek = this.handleDateWeek.bind(this);
    this.appendTable = this.appendTable.bind(this);
  }

   componentDidMount() {
     this.handleDateWeek();
   }

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

  appendTable() {
    this.setState(
      {
        columnStatic: [{ name: "customerName", title: "Klient" }],
        columnsDynamic: [],
        columnBands: [],
        columns: [],
        tableColumnExtensions: [],
        percentColumns: []
      },
      () => {
        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"
                }
              ]
            }));
          });
        });
      }
    );
  }

return (
  <Fragment>
      {this.props.isLoading ? (
          <div className={classes.loadingContainer}>
            <Loading />
          </div>
      ) : (
        <Fragment>
          <Paper>
            <Grid
              rows={dataApi}
              columns={columns.concat(columnStatic, columnsDynamic)}
            >
               ...
            </Grid>
          </Paper>
        </Fragment>
      )}
  </Fragment>
);

Answer 1

您可以在componentDidUpdate中进行此操作：

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

保持PureComponent并不是问题，因为isLoading是原始的布尔属性，因此diff将触发组件更新。

话虽如此，我建议不要将上述信息保持在反应状态，因为它可以从道具中获取。您只需要将转换器逻辑移动到可以从render调用的方法中即可。这将确保真理的单一来源，这是redux的核心原则。

当redux更改存储道具时运行我的方法。 ReactJS

1 个答案: