Redux Toolkit状态丢失问题：确认订单Reducer异常排查

你的confirmOrder reducer存在两个关键错误，直接导致了状态异常：

1. 返回结构错误：
   你的state是包含orders属性的对象，但你直接返回了state.orders.map()生成的数组，这会把整个state替换成数组，原本的orders属性自然就"消失"了。

2. else分支返回值错误：
   当订单ID不匹配时，你返回了整个state对象，而非原有的order对象，这会把所有非目标订单都替换成state对象，彻底破坏数据结构。

修正后的confirmOrder代码 #

confirmOrder : (state, action)=> {
    const { selected_order_id } = action.payload;
    // 生成更新后的订单数组
    const updatedOrders = state.orders.map((order)=>{
        if(selected_order_id === order.id){
            return {...order, is_confirmed : 1}
        } else {
            // 不匹配时返回原订单对象
            return order;
        }
    })
    // 返回完整的state结构，保留原有状态的其他属性
    return {
        ...state,
        orders: updatedOrders
    }
}

完整修正后的Slice代码 #

const initialState = {orders : []}
const orders = createSlice({
    name : "orders",
    initialState : initialState,
    reducers : {
         addToOrders : (state, action)=> {
             return {
                 ...state, orders : state.orders.concat(action.payload)
             }
         },
         confirmOrder : (state, action)=> {
             const { selected_order_id } = action.payload;
             const updatedOrders = state.orders.map((order)=>{
                 if(selected_order_id === order.id){
                     return {...order, is_confirmed : 1}
                 } else {
                     return order;
                 }
             })
             return {
                 ...state,
                 orders: updatedOrders
             }
         }
    }
})
export const {addToOrders,confirmOrder} = orders.actions;
export default orders.reducer;

另外，你原代码里把initialState拼写成了initalState，虽然不影响运行，但建议修正为正确拼写，避免后续混淆。

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