擦除角色会产生错误

loading...


4

我的小实验的目标很简单:过滤/搜索名称与输入文本字段中键入的当前值匹配的用户 . 为了实现这样的功能,我使用 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 完成的 .

loading...

1回答

  • 4

    我认为你在打字时是有效的,只是用一个更窄更窄的参数进行过滤 . 擦除时, state.users 已经变异,只包含以前过滤的用户,看起来它停止工作 .

    要解决这个问题,请更改

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

    喜欢的东西

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

暂时没有评论!