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

编程问答 2022-08-18

问题描述

我编写了一个自定义钩子，以使用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获取最新状态。

我该如何实现？

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjsreactjsreduxreduxreduxredux-thunk