UseEffect异步操作

Question

在我的useEffect钩子中，我有一些API请求，比如：

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

如何利用异步/等待函数在钩子内部使用“last”参数，在发出第一次请求之前加载为true，在最后发出请求后作为false加载。比如：

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

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

Answer 1

你可以这样做：

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的信息

Answer 2

我总是创建一个自定义钩子，并将其用于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);
}, []);