多个使用效果 React.useEffect 缺少依赖项

Question

我有一个产品组件，它显示一个类别的产品。 CategoryId 取自路由参数，然后用户可以对产品进行分页。因此，当类别 ID 更改时，有 2 个 useEffect 一个，另一个在当前页码更改时。如果我使用一个效果和两个依赖项(categoryId 和当前页面(，我找不到将当前页码重置为 1 的方法。(当用户在类别 1 中并转到 2 页面时，我想在类别更改时重置页码(

import React from "react";
import {
useProductState,
useProductDispatch
} from "../contexts/product.context";
const Products = props => {
const categoryId = +props.match.params.id;
const { categoryProducts, totalCount } = useProductState();
const [currentPage, setCurrentPage] = React.useState(1);
const dispatch = useProductDispatch();
const pageSize = 2;
const pageCount = Math.ceil(+totalCount / pageSize);
React.useEffect(() => {
setCurrentPage(1);
dispatch({
type: "getPaginatedCategoryProducts",
payload: {
categoryId,
pageSize,
pageNumber: currentPage
}
});
}, [categoryId]);
React.useEffect(() => {
dispatch({
type: "getPaginatedCategoryProducts",
payload: {
categoryId,
pageSize,
pageNumber: currentPage
}
});
}, [currentPage]);
const changePage = page => {
setCurrentPage(page);
};
return (
<div>
<h1>Category {categoryId}</h1>
{categoryProducts &&
categoryProducts.map(p => <div key={p.id}>{p.name}</div>)}
{pageCount > 0 &&
Array.from({ length: pageCount }).map((p, index) => {
return (
<button key={index + 1} onClick={() => changePage(index + 1)}>
{index + 1}
</button>
);
})}
<br />
currentPage: {currentPage}
</div>
);
};
export default Products;

Answer 1

你有两个效果：

1.更改categoryId时，将当前页面设置为 1 ：

React.useEffect(() => {
setCurrentPage(1);
}, [categoryId]);

2.当categoryId或currentPage发生变化时，获取新数据：

React.useEffect(() => {
dispatch({
type: "getPaginatedCategoryProducts",
payload: {
categoryId,
pageSize,
pageNumber: currentPage
}
});
}, [currentPage, categoryId, dispatch]);

https://codesandbox.io/s/amazing-cartwright-jdg9j

Answer 2

我认为您可以将类别保持在组件的本地状态，就像您对页面所做的那样。然后，您可以检查本地状态是否与Redux状态匹配。如果没有，您可以重置页码并设置新类别，或者仅在需要时更改页码。另一个 useEffect 可能不适用于类别更改，因为它不是本地状态更改，并且 useEffect 仅在本地状态更改时触发。这里有一个可能会有所帮助的例子

React.useEffect(() => {
if(categoryId!==currentCategory){
dispatch({
type: "getPaginatedCategoryProducts",
payload: {
categoryId,
pageSize,
pageNumber: 1
}
});
}
else{
dispatch({
type: "getPaginatedCategoryProducts",
payload: {
categoryId,
pageSize,
pageNumber: currentPage
}
});
}
}, [categoryId,currentPage]);

我希望你能理解，答案是有帮助的。