Question

我已经在React中创建了一个过滤器函数。用户将在输入中键入搜索词，列表将正确过滤。但是，当用户删除最后一个字母时，列表不会更新回以前的结果。为了解决这个问题，我必须设置两次setState，一次渲染原始项目数组，一次渲染过滤后的项目：

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(users => {
        this.setState({ filteredUsers: users });
        this.setState({ users });
      });
  }

过滤器函数如下所示，并通过onChange从输入中进行更新：

  filterList = event => {
    let updateUsers = this.state.users;
    updateUsers = updateUsers.filter(user => {
      return (
        user.name.toLowerCase().search(event.target.value.toLowerCase()) !== -1
      );
    });
    this.setState({ filteredUsers: updateUsers });
  };

然后我用filteredUsers渲染组件：

  render() {
    const { filteredUsers } = this.state;
    return (
      <div className="App">
        <input type="text" placeholder="Search" onChange={this.filterList} />
        <div className="list">
          <List users={filteredUsers} />
        </div>
      </div>
    );
  }

问题是我是否可以简化流程，而不必用相同的数据两次设置State。遵循DRY原则，我发现没有必要执行此操作，但是看不到我还能如何进行过滤。

此外，我计划实施更多过滤器以进一步限制搜索结果，因此答案应该具有可扩展性。

检查codesandbox上的组件

Answer 1

如果还没有users，则可以渲染filteredUsers。因此，您在componentDidMount上有一个setState，并像这样<List users={filteredUsers || users} />渲染列表，初始状态为{ users: [] }。

查看有效的沙箱：https://codesandbox.io/s/xlp9lv53vw

简化反应过滤器功能

1 个答案: