通过React中的输入从API过滤数据

Question

我目前有一个下拉菜单以及一个搜索栏来搜索数据，但我有几个问题。

API看起来像这样:

{
"id": 1,
"first_name": "Rodrick",
"last_name": "Costar",
"birthdate": "1944-05-06T04:22:45Z",
},

我现在用这个来设置状态

const [data, setData] = useState([]);
const [searchNameFilter, setSearchNameFilter] = useState(data)

通过输入搜索名称的函数是

const searchNames = event =>{

let name = event.target.value.toLowerCase()
let result = []
console.log(name)
result = data.filter((d) => {
return d.first_name.search(name)
})
setSearchNameFilter(result)

}

对于输入的返回函数，我有:

<input name="name" type="text" onChange={(event) => searchNames(event)} />
<main className="container">
{data.map(user => {
return (
<div className="row">
<div>{user.first_name}{user.last_name}</div>
<div>{user.birthdate}</div>

函数工作，但它没有过滤我需要的东西。当我控制日志时，它显示了我输入的字符，但它似乎没有过滤任何内容。我还想过滤它，这样它就可以搜索名字或姓氏，但我把它设置为名字来测试它。

Answer 1

对于您的.search()用例，它不起作用，因为它期望正则表达式(MDN)。尝试使用.includes()方法(MDN)

类似:

<input name="name" type="text" onChange={searchNames} />

function searchNames(ev) {
const searchString = ev.target.value.toLowerCase();
const result = data.filter(({ first_name }) => first_name.toLowerCase().includes(searchString));
setSearchNameFilter(result);
}

Answer 2

你需要一个输入框的状态，这是react而不是普通的JS，不要使用过滤器，而是使用find()函数。

const [input, setInput] = useState(" ");

const found = data。找到(元素=比;元素。

你需要设置::found::来显示它