时间戳

首页 > 解决方案 > 通过 React 中的输入过滤来自 API 的数据

javascript - 通过 React 中的输入过滤来自 API 的数据

问题描述

我目前有一个下拉菜单和一个搜索栏来搜索数据，但我遇到了一些问题。

API 看起来像这样：

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

我目前有这个来设置我的状态

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

const [searchNameFilter, setSearchNameFilter] = useState(data)

我用来通过输入搜索名称的功能是

常量搜索名称 = 事件 => {

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>

该功能有效，但它没有过滤我需要的东西。当我控制台日志时，它会显示我正在输入的字符，但它似乎没有过滤任何内容。我还希望它过滤它，以便它可以搜索名字或姓氏，但我将它设置为名字来测试它。

标签： javascriptreactjsapi

解决方案

对于您的.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);
}

推荐阅读