useEffect 保持渲染解决方法

Question

我有个小问题。我想在组件开始渲染时调用 4 APIs 所以我为此使用了 use effect 所以我循环我的数组，它有 4 个项目并且在每个项目我调用一个 API，每个 API 将结果保存在名为 filtersCount 的选择器中。问题是当 filtersCount 更新时循环重新开始。如何在不禁用 eslint 的情况下防止这种情况发生？？

const fetchCounts = useCallback(
  (item) => {
    if (!filtersCount[item.key]) {
      dispatch(getFilterCount({ filters: item.countFilters, key: item.key }));
    }
  },
  [dispatch, filtersCount]
);

useEffect(() => {
  exploreItemTypes.map((item) => {
    fetchCounts(item);
  });
}, [exploreItemTypes, fetchCounts]);

Answer 1

您可以为此使用 Ref :

const firstRender =useRef(false)
useEffect(() => {
    if(firstRender.current == false){
      exploreItemTypes.map((item) => {
        fetchCounts(item);
       });
      firstRender.current = true 
    }

  }, [exploreItemTypes, fetchCounts]);

Answer 2

我认为最简单的方法是在 useEffect 中使用一个空数组。

useEffect(() => {
    exploreItemTypes.map((item) => {
      fetchCounts(item);
    });
  }, []);

这将在您的迭代结束后停止。

useEffect 保持渲染解决方法

useEffect keep rendering workaround

reactjs

react-native