React ，为什么这个 useEffect 在加载时被触发？ [复制]

Question

我有以下代码

const IssuesItems: React.FC<IProps> = function ({ issuesProp }) {
  const [issues] = useState<any>([...issuesProp]);
  const [paginatedIssues, setPaginatedIssues] = useState<any>([]);
  const [currentPage, setCurrentPage] = useState<any>(1);
  const [itemsPerPage, setItemsPerPage] = useState<any>(13);
  const [numberOfPages, setNumberOfPages] = useState<any>(null);

  useEffect(() => {
    // set the number of pages
    const numberOfPages = Math.ceil(issues.length / itemsPerPage);
    console.log(numberOfPages);
    setNumberOfPages(numberOfPages);
  }, []);

  useEffect(() => {
    console.log(numberOfPages);
    const newArr = splitArray(issues, numberOfPages);
    console.log('new arr');
    console.log(newArr);
  }, [numberOfPages]);

问题是，第二个useEffect在加载时触发，当numberOfPages为null时，不应该在第一次触发setNumberOfPages后才触发吗？

我可以解决这个问题

 useEffect(() => {
    if (numberOfPages != null) {
      const newArr = splitArray(issues, numberOfPages);
      console.log('new arr');
      console.log(newArr);
    }
  }, [numberOfPages]);

但它应该只在 numberOfPages 状态被 setNumberOfPages 调用修改后触发吗？

Answer 1

默认情况下，useEffect 总是在第一次渲染后运行。

useEffect 中的依赖数组可让您指定触发它的条件。如果你提供 useEffect 一个空的依赖数组，它只会运行一次。

如果您只想在第一次触发 setNumberOfPages 后触发，那么您使用它的方式是正确的：

useEffect(() => {
    if (numberOfPages != null) {
      const newArr = splitArray(issues, numberOfPages);
      console.log('new arr');
      console.log(newArr);
    }
  }, [numberOfPages]);

此外，您可以查看这个很棒的 StackOverflow 答案：https://stackoverflow.com/a/59841947/16420018

丹·阿布拉莫夫的这篇文章： https://overreacted.io/a-complete-guide-to-useeffect/

Answer 2

您拥有的 useEffect (2nd) 将在初始渲染上运行，然后在 numberOfPages 更改其值的每个后续渲染中运行。

问题是，第二个useEffect是在加载时触发的，当numberOfPages为null时，不应该在第一次触发setNumberOfPages后才触发吗？

您无法逃脱初始渲染。但有条件地你可以让它像你一样什么都不做。 useRef 也用于逃避初始渲染的效果。

Answer 3

你只能在一个函数中使用一个 useEffect 你不能在一个组件中使用多个 useEffect。