Redux 商店不会在第一次单击按钮时更新

Question

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

我尝试了不同的条件来呈现表格的数据字段道具中的项目，但没有成功。我也尝试在 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);

当数据道具的条件正确时，预期的结果是能够在第一次点击时进行过滤。

Answer 1

试试这个，可能会有帮助

...
componentDidMount() {
    this.props.getDeliveries();    
}
...
componentWillReceiveProps(recievedProps) {
    if (this.props.deliveries != recievedProps.deliveries) {
        this.setState({
            itemsToDisplay: recievedProps.deliveries
        })
    }
}
...

Answer 2

为什么您的组件中有另一个事实来源（状态）？基本上，将 props 存储在组件状态中是一种不好的做法（当然有一些情况，但我认为您在这里不需要它）。

我认为您的组件应该只接收一个 items 属性，它会显示已交付或未交付的项目。您的操作将负责根据您在 getDeliveries/filterUndelivered 操作中设置的某种过滤器在您的 items 属性中传递已交付或未交付的项目。

这样，您将始终将 items 道具传递给您的 BootstrapTable data 道具，并且您的 redux 将负责在您的组件 items 道具中传递正确的项目（已交付或未交付）。

这种方法的另一个优点是，如果您要为您的项目添加另一种过滤器（比如说搜索查询），那么您只需扩展您的 redux 过滤器状态并添加 searchQuery 属性。这样您就可以轻松地将新过滤器应用于您的项目，并且您的组件基本上不需要任何更改。

Here 是一个简单的待办事项示例，具有简单的过滤功能，您可以将其应用于您的案例。

Answer 3

在将数据加载到表之前执行简单的检查数据是否可用

{
  itemsToDisplay.lenght > 0 &&
    <BootstrapTable
              data={ itemsToDisplay }
              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>
}

Answer 4

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

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

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

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

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

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