UseEffect 异步操作

Question

在我的 useEffect 挂钩中，我有一些 API 请求，例如：

useEffect(() => {
    dispatch(action1());
    dispatch(action2());
    dispatch(action3());
}, []);

如何在使用 async/await 函数的钩子中使用“加载”参数，以便在分派第一个请求之前加载为真，在分派最后一个请求后加载为假。 喜欢：

const [loading, setLoading] = useState(false);

useEffect(() => {
    setLoading(true);
    dispatch(action1());
    dispatch(action2());
    dispatch(action3());
    setLoading(false);
}, []);

Answer 1

我总是创建一个自定义钩子并将其用于 API 调用和 redux 调度。看看这可能会有所帮助。

const useAction = () => {
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(false);

  const fetchData = async (params) => {
    setLoading(true);
    try {
      // do something
      // await call api
      dispatch(action1());
      dispatch(action2());
      dispatch(action3());
    } catch (error) {
    } finally {
      setLoading(false);
    }
  };

  return { fetchData, loading };
};

// Component
const { fetchData, loading } = useAction();
useEffect(() => {
  fetchData(params);
}, []);

Answer 2

你可以这样做：

const [loading, setLoading] = useState(false);

useEffect(() => {
  async function fetchData() {
    setLoading(true);
    await dispatch(action1());
    await dispatch(action2());
    await dispatch(action3());
    setLoading(false);
  }
  fetchData()
}, []);

了解更多关于useEffect 和async：React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing