从 useEffect 调用 dispatch

Question

我有以下自定义钩子：

export const useCurrentUser = () => {
  const dispatch = useDispatch();
  const user = useSelector(currentUserSelector);
  const preferredLanguage = useMemo(() => getUserAttribute(user, "preferred_language") || "en",
    [currentUser]
  );

  useEffect(() => {
    dispatch(loadAttributes(preferredLanguage));
  }, [preferredLanguage, dispatch]);

  return { preferredLanguage };
};

还有这个 redux 操作：

const _getDefaultAttributes = async dispatch => {
  try {
    const res = await axios.get("www.api.com/attr.json");
    // receive omitted...
  } catch (err) {
    dispatch(failureAttributes(err));
  }
};

export const loadAttributes = (lang = null) => async dispatch => {
  if (!lang) {
    dispatch(_getDefaultAttributes());
    return;
  }

  try {
    const res = await axios.get(`www.api.com/attr-${lang}.json`);
    // receive omitted...
  } catch {
    _getDefaultAttributes(dispatch);
  }
};

我遇到的问题是它发出了大约 40 个请求。首先用 loadAttributes() 调用 en 为 lang，api 返回错误，因为它没有 en 的属性，然后它默认加载默认属性。这是“网络”选项卡的屏幕截图：

知道是什么原因造成的吗？

Answer 1

一个常见的假设是自定义钩子可用于在组件之间共享状态，但实际上它们并不比普通的 javascript 函数多多少。钩子内的代码的行为方式与将其放置在使用它的组件内的方式完全相同。这意味着所有 useState 和 useEffect 调用将由每个组件实例独立执行（在本例中为所有 40 个组件实例:)）。