多个 useEffect React.useEffect 缺少依赖项

Question

我有一个 Products 组件，它显示一个类别的产品。CategoryId 取自路由参数，然后用户可以对产品进行分页。所以有2个useEffect，一个是categoryId改变的时候，另一个是当前页码改变的时候。如果我使用具有两个依赖项（categoryId 和 currentPage）的一个效果，我找不到将当前页码重置为 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.When categoryIdor currentPagechange then fetch new data :

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

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