当我退格时搜索栏不保留

Question

我已经做了一个搜索栏，我可以过滤和搜索我的数据。当我退格并试图搜索其他人时，问题就开始了。我知道我必须存储过滤后的数据，因为每次过滤都会带回新的数据。我该怎么做呢?我有我的代码在这个附件以及。

import React, { useEffect, useState } from "react";
import Card from "@material-ui/core/Card";
import CardContent from '@material-ui/core/CardContent';
import Grid from "@material-ui/core/Grid";
import { Input } from "@material-ui/core";
function StudentProfiles() {
const [info, setInfo] = useState();
const [input, setInput] = useState('');
useEffect(() => {
fetch("https://api.hatchways.io/assessment/students")
.then(response => response.json())
.then(json => setInfo(json.students))
}, []);
/*const average = (array) => array.reduce((a,b) => a + b )/ array.length;*/
const filterChange = (e) => {
e.preventDefault();
const target = e.target.value;
setInput(target);
if (input !== '') {
const result = info && info.filter((user) => {
return user.firstName.toLowerCase().startsWith(input.toLowerCase());
});
setInfo(result);
} if (input !== '') {
const result = info && info.filter((person) => {
return person.lastName.toLowerCase().startsWith(input.toLowerCase());
});
setInfo(result);
}
else {
setInfo(info && info);
}
}
return (
<div>
<Card className="card">
<CardContent className="scrollbar scrollbar-primary mt-5 mx-auto">
<Input
className="searchBar"
icon="search"
placeholder="Search by name"
onChange={filterChange}
value={input}
/>
{info && info.map((name) => (
<ul className="border" key={name.id}>
<Grid item xs={3} sm={6} md={12} style={{ display: "flex", gap: "3.5rem", paddingBottom: "8px" }}>
<img alt="" src={name.pic} className="picture"></img>
<Grid container style={{ display: "inline" }} align="left" justifyContent="flex-end" alignItems="flex-start">
<Grid className="studentNames">
<span>{name.firstName + " " + name.lastName}</span>
</Grid>
<span>{name.email}</span>
<br />
<span>{name.company}</span>
<br />
<span>{name.skill}</span>
<br />
<span>Average: {88.66}%</span>
</Grid>
</Grid>
</ul>
))}
</CardContent>
</Card>
</div>
)
}
export default StudentProfiles;

Answer 1

您可以为过滤后的数据创建另一个状态并显示它。

const [filtered, setFiltered] = useState([]);

把setInfo改成setFiltered