Javascript 使用过滤器对JS表进行反应

我正在尝试调整react js文档中的这个表 遇到了一些奇怪的问题，如下面的截图所示。

我们尝试在lBir上进行过滤

最终的结果是我得到了额外的行。这里是代码的全部荣耀

从“React”导入React；
从“react dom”导入react dom；
类UserRow扩展了React.Component{
render（）{
const user=this.props.user；
const name=user.name；
返回(
{name}
{user.system}
);
}
}
类UserTable扩展了React.Component{
render（）{
const filterText=this.props.filterText；
常量行=[]；
this.props.users.forEach（（用户）=>{
console.log（this.props.users）；
if（user.name.indexOf（filterText）=-1）{
//log（'filter text=-1'）
返回；
}
推(
);
});
返回(
名称
系统
{rows}
);
}
}
类SearchBar扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleFilterTextChange=this.handleFilterTextChange.bind（this）；
}
handleFilterTextChange（e）{
this.props.onFilterTextChange（即target.value）；
}
render（）{
返回(
);
}
}
类FilterableUserTable扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
筛选器文本：“”
};
this.handleFilterTextChange=this.handleFilterTextChange.bind（this）；
}
HandleFilterText更改（filterText）{
console.log（filterText）；
这是我的国家({
过滤文本：过滤文本
});
}
render（）{
返回(
);
}
}
常量用户=[
{名称：'lJames'，系统：'test@testy.com'},
{名称：'lJames'，系统：'test@tester.com'},
{名称：'lBird'，系统：'lbird@moretesting.com'},
{名称：'mJordan'，系统：'lbird@somemore.com'},
{名称：'tester'，系统：'mjordan@nba.com'},
];
ReactDOM.render(
,
document.getElementById（'容器'）
);

反应应用程序
您需要启用JavaScript才能运行此应用程序。

React使用键来标识列表中的组件，并且它们在该列表中应该是唯一的。如果有多个组件具有相同的键，则可能会导致与您看到的组件类似的问题（因为您使用

名称

作为键，并且两个用户的名称为

lJames

）

---

您可以通过为每个用户提供一个唯一的

id

属性，或者使用连接的用户和电子邮件作为键-

key={user.name+user.system}

使用React对任何表应用筛选器来解决此问题

例：- 1.首先，您需要状态来存储所有数据

state = {
  List: [],
  backupList: []
};
All data should be stored in List[]. And backupList[] is needed for reference
which acts as temporary variable.

二,。创建一个文本类型的输入框，并使用onChange事件

在这里，我根据全名筛选表，但您可以对不同的数据使用此方法

<input type="text" placeholder="Filter" onChange={this.filterList} />

filterList = (event) => {
var updatedList = this.state.backupList;
updatedList = updatedList.filter(function(list) {
  return (
    list.fullname.toLowerCase().search(event.target.value.toLowerCase()) !==
    -1
  );
});
this.setState({
  List: updatedList
});
};