reactjs - 从 useEffect 调用 dispatch

Question

我有以下自定义钩子(Hook):

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 Action :

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

自定义钩子(Hook)可以用来在组件之间共享状态是一个普遍的假设，但实际上它们并不比普通的 javascript 函数多多少。钩子(Hook)内的代码将以完全相同的方式运行，就好像它被放置在使用它的组件内一样。这意味着所有 useState 和 useEffect 调用将由每个组件实例独立执行(在本例中由所有 40 个组件实例:))。