React开发搜索框功能异常无法筛选匹配卡片 求代码问题排查

问题原因 #

搜索功能失效的核心原因是props命名拼写不一致，导致输入框的变更事件没有绑定到正确的状态更新函数：

• App.js中给SearchBox组件传递的属性名为searchCange
• 但SearchBox组件内部接收的属性名为searchChange
  两者拼写不匹配，输入内容无法触发state中searchfield的更新，过滤逻辑自然不会生效。

另外还有两处非致命但不规范的写法，也建议同步修正：

• App.js中定义的事件处理函数名onSearchCange同样存在拼写错误，统一修正更利于后续维护
• CardList中做数组遍历时，已经通过map拿到了每一项的user变量，不需要再通过数组索引robots[i]取值，直接用user的属性更稳妥

具体修改方案 #

1. 修正App.js的拼写错误 #

找到App.js中以下两处代码修改：

// 方法名拼写修正，Cange改为Change
onSearchChange = (event) => {
  this.setState({ searchfield: event.target.value })
}

// 给SearchBox传的属性名拼写修正，searchCange改为searchChange
<SearchBox searchChange={this.onSearchChange} />

2. （可选）修正CardList的遍历取值 #

修改CardList中的map逻辑：

const cardComponent = robots.map((user, i) => {
  return (<Card
   key={i}
   id={user.id}
   name={user.name}
   email={user.email}
   />
  );
})

修改完成后搜索功能即可正常工作。

内容的提问来源于stack exchange，提问作者jjw