如何使用React Hooks实现数据提取后的搜索

Question

我已经从API中提取了一个数据，我想添加一个搜索组件，这样我就可以从提取的数据中搜索单个用户。我需要一些帮助才能做好这件事。谢谢你的帮助，我希望你能理解我。在下面你可以看到我做了什么：

DataFethed.js:

import React, { useState, useEffect } from "react";
import axios from "axios";
import Search from "./Search";
function DataFethed() {
const [searchValue, setSearchValue] = useState("");
const [users, setUsers] = useState([]);
useEffect(() => {
axios
.get(
"https://gist.githubusercontent.com/benna100/5fd674171ea528d7cd1d504e9bb0ca6f/raw"
)
.then(res => {
console.log(res);
setUsers(res.data);
})
.catch(error => {
console.log(error);
});
}, []);
const searchHandler = value => {
setSearchValue(value);
};
let updateUsers = users.filter(item => {
return item.name.toLowerCase().includes(searchValue);
}, []);
return (
<div className="App">
<h5>Shift OverViewShift</h5>
<Search searchHandler={searchHandler} />
{updateUsers.map((shifts, index) => (
<DataFethed key={index} props={shifts} />
))}
<ul>
{users.map(user => (
<ol key={user.name}>
<br />
{user.name} <br />
{user.start} <br />
{user.end}
</ol>
))}
</ul>
</div>
);
}
export default DataFetched;

Search.js:

import React from "react";
const Search = ({ searchHandler }) => {
const handleSearchInputChange = e => {
searchHandler(e.target.value);
};
return (
<form className="search">
<input
onChange={handleSearchInputChange}
type="text"
placeholder="Search Name..."
/>
<i className="fas fa-search" type="submit" value="SEARCH"></i>
</form>
);
};
export default Search;

Answer 1

由于我们交换了意见，您只需要一个条件呈现。在DataFetched中，您应该编写以下return语句：

return (
<div className="App">
<h5>Shift OverViewShift</h5>
<Search searchHandler={searchHandler} />
<ul>
{(searchValue === '' ? users : updateUsers).map(user => (
<ol key={user.name}>
<br />
{user.name} <br />
{user.start} <br />
{user.end}
</ol>
))}
</ul>
</div>
);

基本上，现在，当searchValue为NOT空(意味着您正在搜索(时，您将使用updateUsers来呈现用户。相反，当searchValue为空时，可以使用users来渲染ALL用户
此外，由于users和updateUsers的结构相同，因此可以使用相同的map()函数：请注意，三元运算符仅指定是使用users还是updateUsers。