reactjs - 组件挂载时 useEffect 中的调度操作

Question

我编写了一个自定义钩子来使用 Redux 和 Redux thunk 调度 API 获取。if如果我添加一个以检查我的状态是否包含数据，则该操作可以正常工作，并且我的钩子可以正常工作：

import { useCallback, useEffect } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';

import { getOrderInfo } from '../actions/ordersActions';

function useCheckOrderReduxState() {
    const dispatch = useDispatch();
    const { id } = useParams();
    const { orderInfo } = useSelector((state) => state.order, shallowEqual);

    const boundAction = useCallback(() => {
        return dispatch(getOrderInfo(id));
    }, [dispatch]);

    useEffect(() => {
        if (!orderInfo) {
            boundAction();
        }
    }, [boundAction, orderInfo]);
}

export default useCheckOrderReduxState;

我的问题是，我只想getOrderInfo在渲染具有钩子的页面时分派一次，每次渲染此页面时，即使我已经有数据在里面orderInfo。

如果我if (!orderInfo)从 中删除useEffect，我会进入一个无限循环，因为每次状态更新时都会重新渲染组件，如果我保留它if，如果orderInfo.

每次渲染组件时我都需要更新状态，因为它可能具有过时的状态，并且我想从 API 获取最新状态。

我怎样才能做到这一点？

提前致谢！

标签： reactjsreduxredux-thunk