reactjs - 在从 `useEffect` 调用的`useCallback` 中设置和使用状态时的无限循环

Question

我想在用户更改时获取数据。

为此，我有一个useEffect在更改时触发user的函数，它调用一个函数来获取数据。

问题是useEffect因为它依赖于getData并且getData改变了因为它同时使用和设置而被频繁地调用loading。

有没有办法解决这个问题，同时仍然保留getData为一个函数，就像我在别处所说的那样。

const getData = useCallback(async () => {
    if (!loading) {
      try {
        setLoading(true);

        const { error, data } = await getDataHook();
        if (error) {
         throw new Error("blah!");
        }

      } catch (error) {
        const message = getErrorMessage(error);
        setErrorMessage(message);
        setLoading(false);
      }
    }
  }, [loading]);

...

  useEffect(() => {
    const callGetData = async () => {
      await getData();
    };
    callGetData();
  }, [user, getData]);

标签： reactjsreact-hooks

Answer 1

尝试loading从移动useCallback到useEffect。像这样的东西：

const getData = useCallback(async () => {
        try {
            const { error, data } = await getDataHook();
            if (error) {
             throw new Error("blah!");
            }

        } catch (error) {
            const message = getErrorMessage(error);
            setErrorMessage(message);
        }
  }, []);

...

  useEffect(() => {
    const callGetData = async () => {
      await getData();
    };
    if (!loading) {
      setLoading(true);
      callGetData();
      setLoading(false);
    }
  }, [user, getData, loading]);