使用useEffect从后端动态加载列表触发无限循环该怎么解决？

你的代码存在两个核心问题导致无限循环：

1. 条件判断逻辑错误：!myOrders < 1 存在运算符优先级问题，! 优先级高于 <，实际会先将 myOrders 转为布尔值再和1比较，最终判断结果永远为真，无条件触发拉取逻辑。
2. 依赖项选择错误：将 useEffect 回调中会修改的状态 myOrders 放入依赖数组，天然形成「修改myOrders → 触发effect → 再次修改myOrders」的循环逻辑；且Redux每次更新状态都会返回新的对象引用，哪怕 myOrders 内容不变，浅对比也会认为依赖发生变化，进一步加重循环。

另外你的reducer存在小缺陷：MY_ORDERS_REQUEST 分支直接返回 { loading: true } 会清空之前存储的 myOrders 和 error 字段，建议改为返回{ ...state, loading: true }保留历史状态。同时注意你代码中dispatch的getmyOrders大小写和定义的Redux action getMyOrders不一致，属于笔误需要修正。

以下方案均可满足你「页面加载拉取最新数据、订单任意位置修改后自动刷新」的需求：

方案1：新增更新触发器（推荐） #

通过Redux新增独立的更新标记位，避免监听订单列表本身：

1. 修改myOrdersListReducer，新增refreshTrigger字段和对应更新逻辑：

export const myOrdersListReducer = (state = { myOrders:[], refreshTrigger: 0 }, action) => {
    switch(action.type) {
        case 'MY_ORDERS_REQUEST':
            return { ...state, loading: true }
        case 'MY_ORDERS_SUCCESS':
            return { ...state, loading: false, myOrders: action.payload }
        case 'MY_ORDERS_ERROR':
            return { ...state, loading: false, error: action.payload }
        case 'MY_ORDERS_RESET':
            return { ...state, myOrders:[]}
        // 新增订单更新触发逻辑
        case 'ORDER_UPDATED':
            return { ...state, refreshTrigger: state.refreshTrigger + 1 }
        default: 
            return state
    }
}

2. 所有会修改订单的操作（新建订单、取消订单、支付订单等）执行成功后，dispatch一个{ type: 'ORDER_UPDATED' }的action
3. 修改页面useEffect逻辑：

const { myOrders, refreshTrigger } = useSelector(state => state.myOrdersList)

useEffect(()=> {
    dispatch(getMyOrders())
}, [dispatch, refreshTrigger])

该方案无需在各个业务场景重复写拉取逻辑，只要有订单修改就会自动触发刷新，不会产生循环。

方案2：轻量化路由监听 #

如果不想修改Redux逻辑，且使用了React Router，可通过监听路由进入事件+操作后主动触发实现：

import { useLocation } from 'react-router-dom'

const location = useLocation()
const { myOrders } = useSelector(state => state.myOrdersList)

// 页面首次加载、每次进入订单页时拉取最新数据
useEffect(()=> {
    dispatch(getMyOrders())
}, [dispatch, location.pathname])

// 当前页面内修改订单的操作成功后，主动调用dispatch(getMyOrders())即可刷新

内容的提问来源于stack exchange，提问作者pancake