Javascript 如何在React中为JSON数据表创建搜索过滤器？

我一直在尝试通过按数据头的值过滤数据来实现JSON数据表的搜索过滤器

这是输入字段

 <input type= "text" placeholder="Search..." value={search} onChange={(e) => 
 {setSearch(e.target.value)}} />

{setSearch（e.target.value）}}/>

下面是数据表

<table cellSpacing="40" cellPadding="20" >
            <thead>
                <tr>
                <th>#ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>LGA</th>
                <th>WARD</th>
                </tr>
            </thead>
            <tbody>
    {person.map(record =>(
        <tr key = {record.id}>
        <td>{record.id}</td>
        <td> <Link to={`/beneficiary/${record.full_name}`} >
         {record.full_name}</Link></td>
         <td>{record.gender}</td>
         <td>{record.lga}</td>
         <td> {record.ward} </td>
        </tr>     
    ))}
    
</tbody>
</table>
    
}

#身份证
名称
性别
LGA
病房
{person.map（记录=>(
{record.id}
{record.full_name}
{记录性别}
{record.lga}
{record.ward}
))}
}

---

如何用数据表包装输入字段，以便能够通过其数据头的值获取数据。比如说，一个性别的标题。我只想得到男性的结果。etc

根据您的描述，您需要向

person.map（…）

，即您需要使用

person.filter（somefilterfunction）.map（record=>（

。现在的问题是如何编程

somefilterfunction

，以满足您的需要，例如，您希望筛选男性，然后使用

(person) => {
    if (person.gender === search) {
        return person;
    }
}

这里的

search

应该是您的状态（我猜您使用的是React钩子），其他过滤规则也可以类似地实现

---

---

Modern React还支持

useMemo

，它可以作为过滤数据的缓存，这可能会有更好的性能。您可以通过或谷歌对其进行更深入的研究。

只需先过滤数据即可

       {person.filter((e) => ['name', 'descr']
       .some((property)=> e[property].toLowerCase()
       .includes(search.toLowerCase())))
       .map(record =>(
            <tr key = {record.id}>
            <td>{record.id}</td>
            <td> <Link to={`/beneficiary/${record.full_name}`} >
             {record.full_name}</Link></td>
             <td>{record.gender}</td>
             <td>{record.lga}</td>
             <td> {record.ward} </td>
            </tr>     
        ))}

{person.filter（（e）=>['name'，'descr']
.some（（属性）=>e[property].toLowerCase（）
.includes（search.toLowerCase（）））
.map（记录=>(
{record.id}
{record.full_name}
{记录性别}
{record.lga}
{record.ward}
))}