如何解决使用中的分派动作安装组件时生效
我编写了一个自定义钩子,以使用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 举报,一经查实,本站将立刻删除。