Reactjs 如何从对象数组中搜索？并通过单击列名按升序和降序对数据进行排序？

我是Reactjs的初学者，我从对象数组中创建数组并创建表，现在我想对创建的表执行搜索操作。我尝试了很多，但我无法在updateSearch（）函数中获得我应该写的内容，以便从表中搜索并显示搜索结果，还可以通过单击列名来对数据进行升序和降序排序。所以，请帮我解决这个问题

类Hello扩展组件{
建造师（道具）{
超级（道具）
此.state={
搜索：“”，
数据：[
{
id:1，
全名：“abc”，
电邮:'example@gmail.com',
},
{
id:2，
全名：“qps”，
电邮:'qps@gmail.com',
},
{
id:3，
全名：“qwe”，
电邮:'qwe@gmail.com',
},
]
}
}
更新搜索（事件）{
这是我的国家({
搜索：event.target.value
});
日志（event.target.value）；
} 
render（）{
返回(
欢迎反应
身份证件
全名
电子邮件
{
this.state.Data.map（（项，索引）=>(
{item.id}
{item.fullName}
{item.email}
))
}
)
}
}
导出默认Hello

您可能正在尝试在组件中使用过滤器功能

class App extends Component {
  Data = [
      {
        id: 1,
        fullName: 'abc',
        email: 'example@gmail.com',

      },
      {
        id: 2,
        fullName: 'qps',
        email: 'qps@gmail.com',

      },
      {
        id: 3,
        fullName: 'qwe',
        email: 'qwe@gmail.com',

      },
    ];
  constructor(props) {
    super(props)
    this.state = {
      search: '',
      filteredArray: this.Data,

    }
  }
  updateSearch(event) {

    this.setState({
      search: event.target.value,
      filteredArray: this.Data.filter((data) => {
        return data.fullName.includes(event.target.value);
      })
    });

    console.log(event.target.value);
  }
  render() {
    return (

      <div>
        <h1>welcome to React</h1>
        <input type="text" placeholder="Enter item to be searched" value={this.state.search} onChange={this.updateSearch.bind(this)} />
        <table className="table table-hover table-dark">

          <tbody>
            <tr>
              <th>ID</th>
              <th>Full Name</th>
              <th>Email</th>
            </tr>
            {
              this.state.filteredArray.map((item, index) => (
                <tr key={item.id}>

                  <td >{item.id}</td>

                  <td >{item.fullName}</td>
                  <td>{item.email}</td>
                </tr>
              ))
            }
          </tbody>
        </table>

      </div>
    )
  }
}

类应用程序扩展组件{
数据=[
{
id:1，
全名：“abc”，
电邮:'example@gmail.com',
},
{
id:2，
全名：“qps”，
电邮:'qps@gmail.com',
},
{
id:3，
全名：“qwe”，
电邮:'qwe@gmail.com',
},
];
建造师（道具）{
超级（道具）
此.state={
搜索：“”，
FilterDarray:这个，数据，
}
}
更新搜索（事件）{
这是我的国家({
搜索：event.target.value，
FilterDarray:this.Data.filter（（数据）=>{
返回data.fullName.includes（event.target.value）；
})
});
日志（event.target.value）；
}
render（）{
返回(
欢迎反应
身份证件
全名
电子邮件
{
this.state.filteredArray.map（（项，索引）=>(
{item.id}
{item.fullName}
{item.email}
))
}
)
}
}

您可以过滤Data.map中的项目，例如：

{this.state.Data.filter（（项）=>{
return！（this.state.search）//如果未设置搜索，则返回所有项目
||item.fullName.match（RegExp（搜索'i'））
||item.email.match（RegExp（搜索'i'））
}).map（（项目、索引）=>(
{item.id}
{item.fullName}
{item.email}
)}

工作代码

类Hello扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
搜索：“”，
数据：[{
id:1，
全名：“abc”，
电邮:'example@gmail.com',
},
{
id:2，
全名：“qps”，
电邮:'qps@gmail.com',
},
{
id:3，
全名：“qwe”，
电邮:'qwe@gmail.com',
},
]
}
}
更新搜索（事件）{
这是我的国家({
搜索：event.target.value
});
}
render（）{
返回(
欢迎反应
身份证件
全名
电子邮件
{ 
this.state.Data.filter（（项）=>{
return！（this.state.search）//如果未设置搜索，则返回所有项目
||item.fullName.match（RegExp（this.state.search，'i'））
||item.email.match（RegExp（this.state.search，'i'））
}).map（（项目、索引）=>(
{item.id}
{item.fullName}
{item.email}
))}
)
}
}
ReactDOM.render（，document.getElementById（'root'））；

您要搜索哪个属性？

id

、

全名

或

电子邮件

？您一次只需要问一个问题。hii bravemaster，您的解决方案对我有效，但有一个问题，它搜索区分大小写，请告诉我我们如何使其不区分大小写