通过 React 中的输入过滤来自 API 的数据答案

【问题标题】：Filtering data from an API though an input in React通过 React 中的输入过滤来自 API 的数据
【发布时间】：2021-08-03 23:14:43
【问题描述】：

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

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>

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

【问题讨论】：

标签： javascript reactjs api

【解决方案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);
}

【讨论】：

嗯，我试过你的解决方案，但它没有过滤掉结果，当我控制台记录结果时，它给出了随机结果。
在我添加的比较中，两个字符串都必须小写，我修复了这个例子。看看我的沙盒codesandbox.io/s/musing-gagarin-b4o8b?file=/src/App.js
啊，我让它工作了。谢谢。还有一个问题，如果我想按名字或姓氏搜索，我是否必须创建一个新的结果变量？
我认为结果可能相同，但在比较中将两个字符串连接起来

【解决方案2】：

您的输入框需要一个状态，它不是原生 JS 的反应，也不要使用过滤器，而是使用 find() 函数。

const [input, setInput] = useState(“”);

const found = data.find(element => element.first_name === input);

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

【讨论】：