javascript - React 过滤器最佳实践

Question

在这种情况下，当我进行过滤时，如何不丢失 React 状态？

当我进行过滤时，我会丢失以前的状态并且程序工作不正确，例如，如果我选择类别运动，然后尝试类别时尚，我看不到时尚中的任何内容，如果这一切都被删除，当我选择运动。

我是 React 新手，我想听听最佳实践。

    FilterCategory(e) {
    // Filter
    const filter = this.state.items.filter(
      (item) => {
        return item.category.indexOf(e.target.name) !== -1
      }
    )
    // Update state
    this.setState({
      items:filter
    })
  }

Answer 1

为什么不使用查询字符串来存储过滤器。

假设您的网址是/products，并且选择的过滤器是性别男性。然后你可以附加/产品？性别=男。

现在，在使用像react-router这样的库进行 react 时，您可以访问此查询参数并选择当前的过滤器，然后执行您想要的任何选项，例如调用api等。

如果您进一步选择其他过滤器，则只需再次附加新过滤器即可查询参数，例如 field1=value1&field2=value2&field3=value3...

当 React 的位置属性发生变化时，您将在组件中获得新的参数。

该技术的优点。1)没有维护状态的麻烦。如果没有以正确的方式存储过滤器的状态可能会变得复杂和笨拙。

2) 如果页面刷新也没有问题。假设您的用户选择了过滤器，并且页面刷新，如果保存在状态中，所有过滤器都将丢失。但如果查询字符串完成，它将保持不变。

由于这个原因，我认为查询字符串是比声明更好的选择。