Question

我知道这是一个关于 useEffect 和 useState 无限循环的过度提问。我已经阅读了几乎所有关于它的问题，并在互联网上进行了搜索，以便在发布之前尝试修复它。我最近阅读的文章是这篇one。

在我阅读这篇文章之前，我在 useState 中的 useEffect 函数没有 useState 的回调，所以我认为这是导致问题的原因。但是从这里移开后：

setNotifications({
  ...notifications,
  [type]: {
    ...notifications[type],
    active: portfolioSettings[type],
    payload: {
      ...notifications[type].payload,
      [pKey]: portfolioSettings[pKey],
    },
  },
});

为此：

setNotifications((currState) => ({
  ...currState,
  [type]: {
    ...currState[type],
    active: portfolioSettings[type],
    payload: {
      ...currState[type].payload,
      [pKey]: portfolioSettings[pKey],
    },
  },
}));

不幸的是，无限循环仍然存在。以下是我在该组件中使用的所有 useEffect 函数（最后一个是导致无限循环的函数）。

// Set default selected portfolio to the active portfolio
useEffect(() => {
  let mounted = true;

  const setPortfolioData = () => {
    if (activePortfolio) {
      const portfolioId = activePortfolio.id;
      const portfolioName = activePortfolio.name;
      setSelectedPortfolio({
        portfolioId,
        portfolioName,
      });
    }
  };

  if (mounted) setPortfolioData();

  return () => {
    mounted = false;
  };
}, [activePortfolio]);

// Set all the categories if no category is set
useEffect(() => {
  let mounted = true;

  if (mounted && allCvmCategories) {
    const allCvmCategoriesNames = allCvmCategories.map((c) => c);
    setNotifications((currState) => ({
      ...currState,
      isCvmNotificationEnabled: {
        ...currState.isCvmNotificationEnabled,
        payload: {
          ...currState.isCvmNotificationEnabled.payload,
          cvmCategories: allCvmCategoriesNames,
        },
      },
    }));
    setIsCvmCategoriesReady(true);
  }

  return () => {
    mounted = false;
  };
}, [allCvmCategories]);

// THE ONE WHICH IS CAUSING INFINITE LOOPING
// THE notificationsTypes AND notificationsInitialState
// ARE DECLARED IN THE ROOT OF THE JSX FILE
// OUT OF THE FUNCTIONAL COMPONENT
useEffect(() => {
  let mounted = true;

  if (
    mounted &&
    isCvmCategoriesReady &&
    allPortfolios &&
    selectedPortfolio.portfolioId
  ) {
    const { portfolioId } = selectedPortfolio;
    const portfolioSettings = allPortfolios[portfolioId].settings;

    if (portfolioSettings) {
      notificationsTypes.forEach((type) => {
        if (Object.prototype.hasOwnProperty.call(portfolioSettings, type)) {
          const { payloadKeys } = notificationsInitialState[type];
          if (payloadKeys.length > 0) {
            payloadKeys.forEach((pKey) => {
              if (
                Object.prototype.hasOwnProperty.call(portfolioSettings, pKey)
              ) {
                setNotifications((currState) => ({
                  ...currState,
                  [type]: {
                    ...currState[type],
                    active: portfolioSettings[type],
                    payload: {
                      ...currState[type].payload,
                      [pKey]: portfolioSettings[pKey],
                    },
                  },
                }));
              }
            });
          } else {
            setNotifications((currState) => ({
              ...currState,
              [type]: {
                ...currState[type],
                active: portfolioSettings[type],
              },
            }));
          }
        }
      });
    }
  }

  return () => {
    mounted = false;
  };
}, [allPortfolios, isCvmCategoriesReady, selectedPortfolio]);

Answer 1

感谢您的回复。我发现了问题，它与我使用（SWR）进行提取的钩子有关。始终更改 allPortfolios。我已将其固定到新的自定义挂钩中。

setState 在 useEffect 中使用其回调导致无限循环

1 个答案: