React更新状态过滤器对象数组

Question

我想要过滤我的对象数组，这是从数据库中获取的。

const [loadedCars, setLoadedCars] = useState();
useEffect(() => {
setLoading(true);
axios
.get(process.env.REACT_APP_BACKEND_URL + "/cars/", {
headers: {
Authorization: "Bearer " + auth.token,
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res.data.cars);
setLoadedCars(res.data.cars);
setLoading(false);
});

}, [auth.token]);

我的搜索代码是这样的

let checker = (src, target) => target.every((v) => src.includes(v));
const searchHandler = (e) => {
e.preventDefault();
setDates(share.date_ranges);
const filtered = loadedCars.filter((item) => !checker(item.dates, share.date_ranges));
console.log(filtered);
setLoadedCars(filtered)
};
<Button onClick={searchHandler} className="search-btn" inverse>Search</Button>

Filter只工作一次。当我想搜索几次时，它没有更新。最后我的对象数组变成空的。

如何更新我的状态?谢谢你的帮助。

Answer 1

发生这种情况是因为您正在将过滤器的结果写入loadedCars，然后当您再次搜索时，您使用相同的过滤数组。提示:这里需要两个常量，一个用于db响应，另一个包含过滤后的搜索。

Answer 2

您需要使用两个状态。首先是所有汽车，其次是过滤后的汽车

const [loadedCars, setLoadedCars] = useState();
const [dbCars, setDbCars] = useState();

useEffect(() => {
setLoading(true);
axios
.get(process.env.REACT_APP_BACKEND_URL + "/cars/", {
headers: {
Authorization: "Bearer " + auth.token,
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res.data.cars);
setLoadedCars(res.data.cars);          
setDbCars(res.data.cars);
setLoading(false);
});

}, [auth.token]);

let checker = (src, target) => target.every((v) => src.includes(v));
const searchHandler = (e) => {
e.preventDefault();
setDates(share.date_ranges);
const filtered = dbCars.filter((item) => !checker(item.dates, share.date_ranges));
console.log(filtered);
setLoadedCars(filtered)
};
<Button onClick={searchHandler} className="search-btn" inverse>Search</Button>