reactjs - Redux 存储在第一次单击按钮时不会更新

Question

我想使用 redux，但仍然通过本地状态控制 bootstrap-react-table 中渲染的内容。因此，在 componentDidMount 中，我正在获取数据，当我尝试通过按钮进行过滤时，单击我将 State 设置为名为“itemsToDisplay”的字段，然后我希望将其用作表的数据。但是单击仅在第二次起作用，并且当我在 render/componentDidMount 中记录状态时，它是未定义的。

我尝试了不同的条件来渲染表的数据字段 Prop 中的项目，但没有成功。我还尝试在 componentWillMount 中设置状态。

class Deliveries extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemsToDisplay: this.props.deliveries,
    };
  }

  componentDidMount() {
    this.props.getDeliveries();
    this.setState(prev => {
      return {
        ...prev,
        itemsToDisplay: this.props.deliveries,
      }
    })
  }

  filterUndelivered = () => {
    this.props.filterUndelivered();
    this.setState(prev => {
      return {
        ...prev,
        itemsToDisplay: this.props.undelivered_items,
      }
    })
  };

  getFilters = () => {
    return (
      <div>
        <Button className="m-1" color="primary">By time</Button>
        <Button className="m-1" color="primary" onClick={ this.filterUndelivered }>Not delivered</Button>
      </div>
    );
  };

  render() {
    const { itemsToDisplay } = this.state;

    const options = {
      insertBtn: this.createCustomInsertButton,
      searchField: this.createCustomSearchField,
    };

    return (
      <div className="animated fadeIn">

        <div className="d-flex justify-content-between">
          <div className="font-weight-bold mt-2">Deliveries Monitor</div>
          <div className="d-flex justify-content-end">
            {this.getFilters()}
          </div>
        </div>
        <BootstrapTable
          data={ itemsToDisplay ? itemsToDisplay : this.props.deliveries }
          version="4"
          search
          hover
          pagination
          bordered={false}
          headerStyle={{ background: "#20a8d8" }}
          bodyStyle={{ cursor: "pointer"}}
          options={ options }
        >
          <TableHeaderColumn isKey dataField="delivery_id">Delivery#</TableHeaderColumn>
          <TableHeaderColumn dataField="seller">Seller</TableHeaderColumn>
          <TableHeaderColumn dataField="address">Address</TableHeaderColumn>
          <TableHeaderColumn dataField="site">Site</TableHeaderColumn>
          <TableHeaderColumn dataField="end_of_window">End of window</TableHeaderColumn>
          <TableHeaderColumn dataField="due_date">Due date</TableHeaderColumn>
          <TableHeaderColumn dataField="status">Status</TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    deliveries: state.deliveriesReducer.deliveries,
    undelivered_items: state.deliveriesReducer.undelivered_items,
  }
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ getDeliveries, filterUndelivered }, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(Deliveries);

预期结果是当 data 属性的条件正确时能够在第一次点击时进行过滤。

Answer 1

尝试修改您的代码，如下所示:

  filterUndelivered = () => {
    this.props.filterUndelivered();
  };

  componentWillReceiveProps = nextProps => {
    if (nextProps.undelivered_items !== undefined) {
      this.setState({ itemsToDisplay: nextProps.undelivered_items });
    }
  };

还可以在浏览器中安装 Redux 开发工具并分析应用程序状态。它可能会让您更深入地了解问题。

Chrome:https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

火狐:https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/