Question

在我的状态下，我有一个包含一些订单的数组，通过用户输入，我想在2个数字之间筛选订单：用户想要查看的最低订单ID和最高（最新的）订单ID。在我的状态下，this.state.orders.orders[0].order_number可以访问第一个订单的订单号。

我编写了两个函数，它们接受用户的输入并将其保存为filterFrom和filterTo状态。当过滤器值位于 {orders: { orders: [], filterFrom: 0, filterTo: 0 }}

updateFromValue(evt) {
    this.setState({
      filterFrom: evt.target.value
    });
  }
  updateToValue(evt) {
    this.setState({
      filterTo: evt.target.value
    });
  }

如何修改状态集并将其设置为更新的值，以便渲染方法重新呈现这些订单的某些视图？

Answer 1

您必须在filter之前使用map函数，我不确定您当前如何显示订单，因此这是如何实现此目的的示例：

  isInRange(orderNumber) {
    let isInRange = true;
    if (this.state.filterFrom !== undefined && this.state.filterFrom !== null) {
      isInRange = orderNumber >= this.state.filterFrom;
    }
    if (
      isInRange &&
      this.state.filterTo !== undefined &&
      this.state.filterTo !== null
    ) {
      isInRange = orderNumber <= this.state.filterFrom;
    }
    return isInRange;
  }
  render() {
    return (
      <div>
        {this.state.orders.orders
          .filter(
            order => this.isInRange(order.orderNumber)
          )
          .map(filteredOrder => {
            return <div>{filteredOrder.orderNumber}</div>;
          })}
      </div>
    );

在filter中，我们检查orderNumber是否大于filterFrom并小于filterTo，然后对通过检查的订单map进行检查在isInRange函数上

在2个值之间过滤状态并重新渲染

1 个答案: