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。 / p>

如果我从if (!orderInfo)中删除useEffect，则会进入无限循环，因为每次状态更新时都会重新渲染该组件，如果保留此if，则我的{如果orderInfo中已经有数据，钩子将不会分派操作。

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

我该如何实现？

谢谢！

使用中的分派动作安装组件时生效

0 个答案: