Question

我的小型实验的目标很简单：筛选/搜索名称与输入文本字段上键入的当前值匹配的用户。为了实现这种功能，我使用了RegExp()。一切都很好，除非我删除一个字符。这样做会使过滤停止。

在构造函数中：

state = { users: [] }

事件：

searchUser = e => {
  const target = e.target;

  this.setState(state => {
    const regex = new RegExp(target.value, 'i');
    const filteredUsers = state.users.filter(user => regex.test(user.name));

    return { users: filteredUsers }
  })
}

在render()内部：

<input type='text' onChange={this.searchUser} />

是因为setState()是异步的吗？

使用componentDidMount()和fetch()在async/await内部完成用户列表的获取。

Answer 1

我认为您在键入时实际上只是使用越来越狭窄的参数进行过滤。删除时，您的state.users已被更改为仅包含以前过滤的用户，看起来好像已停止工作。

要解决此问题，请更改

const filteredUsers = state.users.filter(user => regex.test(user.name));

类似

const filteredUsers = allUsers.filter(user => regex.test(user.name));

擦除字符会产生错误

1 个答案: