javascript - 删除字符会产生错误

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));