我可以一次只获取和过滤单个页面所需的数据吗

Question

我被卡住了。。。我正在尝试在getProducts函数中过滤产品，这可能吗？我想读取查询参数并使用该信息进行筛选。这是我的代码：

import { useLocation, useNavigate } from 'react-router-dom';
import { ProductCard } from './ProductCard';
import { useState, useEffect } from 'react';
import queryString from 'query-string';
import { SearchFilter } from '../../components/Search/SearchFilter';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faChevronCircleLeft,
faChevronCircleRight,
} from '@fortawesome/free-solid-svg-icons';
import axios from 'axios';

export const ProductsList = () => {
const location = useLocation();
const navigate = useNavigate();
const { q = '' } = queryString.parse(location.search); // search query
const { c = '' } = queryString.parse(location.search); // category query
const { i = 0 } = queryString.parse(location.search); // index query (pagination)
const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [currentPage, setCurrentPage] = useState(0);
const productsPerPage = 20;
useEffect(() => {
setIsLoading(true);
const getProducts = async () => {
const res = await axios.get('/casacarinaDataProductos.json');
const { data } = res;
getByCategory(data);
getByDescription(data);
// getByIndex(data);
setIsLoading(false);
};
getProducts();
}, [q, i, c]); //  eslint-disable-line react-hooks/exhaustive-deps

如果我做products.filter，那么此时数组为空。在开始提取数据之前，我导入了json，但我想进行提取，因为我可以检测数据何时加载

const getByCategory = (data) => {
if (c !== '') {
setProducts(
data.filter(
(oneData) => oneData.LISTA.toLowerCase() === c.toLowerCase()
)
);
}
};
const getByDescription = (data) => {
if (q !== '') {
setProducts(
data.filter((oneData) =>
oneData.DESCRIPCION.toLowerCase().includes(q.toLowerCase())
)
);
}
};
const getByIndex = () => {
setProducts(products.slice(i, i + productsPerPage));
};
const previousPage = () => {
if (currentPage > 0) {
setCurrentPage(currentPage - productsPerPage);
navigate(`/productos/busqueda?q=${q}&c=${c}&i=${currentPage}`);
console.log('previous');
}
};
const nextPage = () => {
if (products.length > currentPage + productsPerPage) {
setCurrentPage(currentPage + productsPerPage);
navigate(`/productos/busqueda?q=${q}&c=${c}&i=${currentPage}`);
console.log('next');
}
};

if (isLoading) {
return (
<div>
<h4>Loading...</h4>
</div>
);
} else if (products.length >= 1) {
return (
<div>
<SearchFilter />
{/* <div className='productsList__bannerDiv'>
<img
className='productsList__banner'
src={`/assets/banners/${params.title}Banner.jpg`}
alt='banner'
/>
</div> */}
<div className='productsList__parentDiv'>
<div className='productsList__gridDiv'>
{products.map((product) => (
<ProductCard key={product.CODIGO} {...product} />
))}
</div>
</div>
<div className='productList__pagination'>
<button onClick={previousPage}>
<FontAwesomeIcon icon={faChevronCircleLeft} />
</button>
<button onClick={nextPage}>
<FontAwesomeIcon icon={faChevronCircleRight} />
</button>
</div>
</div>
);
}
return (
<div>
<h4>No results</h4>
</div>
);
};

Answer 1

如果使用以前的状态计算新状态，则可以将函数传递给setState。函数将接收以前的值，并返回更新后的值。

https://reactjs.org/docs/hooks-reference.html#functional-更新

示例：

setProducts(products => products.slice(i, i + productsPerPage));
setCurrentPage(currentPage => currentPage - productsPerPage);