React 表 + 搜索 ARRAY答案

【问题标题】：React Table + Searching ARRAYReact 表 + 搜索 ARRAY
【发布时间】：2022-01-17 21:37:01
【问题描述】：

我需要帮助来过滤 React Table 中的数据。我正在从 API 获取数据并使用反应挂钩将其存储在状态中。我使用 React Table lib 创建了一个表。所以，分页和其他东西工作得很好，但我有一个输入部分，你可以在该表之后输入一个名称，该表应该是动态更改的 end find let say a user from the table。

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

标签： reactjs react-table

【解决方案1】：

假设你是这样写状态的：

import React from 'react';
const usersData = [{name:'x'},{name:'y'}];

const component = () =>{
 const [users,setUsers] = React.useState(usersData);
 // naïve filtration method
 const filterByInput=(input)=>{
  setUsers(usersData.filter((i)=>i.name===input)
 }
 return (...);
}

如果你使用fuse.js，你可以让它变得更好它的实现是这样的

import React from 'react';
import fuse from 'fuse.js';
const usersData = [{name:'x'},{name:'y'}];

const component = () =>{
 const [users,setUsers] = React.useState(usersData);
 const filterByInput=(input)=>{
  const fuse = new Fuse(people, {
    keys: ['name', /*any other key that you want to search for*/]
  })
  setUsers(fuse.search(input).map(i=>i.item));
 }
 return (...);
}

【讨论】：