TypeError：无法读取 ReactJs 中未定义的属性“concat”答案

【问题标题】：TypeError: Cannot read property 'concat' of undefined in ReactJsTypeError：无法读取 ReactJs 中未定义的属性“concat”
【发布时间】：2023-04-08 01:37:01
【问题描述】：

我明白了：

TypeError：无法读取未定义的属性“concat”

但是，我在 initialState 中定义了“订单”数组。

有人知道原因吗？

import * as actionTypes from '../actions/actionTypes.js';
import { updateObject } from '../utility.js';

const initialState = {
    orders: [],
    loading: false,
    purchased: false
};

const purchaseInit = (state, action) => {
    return updateObject(state, { purchased: false });
};

const purchaseBurgerStart = (state, action) => {
    return updateObject(state, { loading: true });
};

const purchaseBurgerSuccess = (state, action) => {
    const newOrder = updateObject(action.orderData, { id: action.orderId });
    return updateObject(state, {
        loading: false,
        purchased: true,
        orders: state.orders.concat(newOrder)
    });
};

const purchaseBurgerFail = (state, action) => {
    return updateObject(state, { loading: false });
};

const fetchOrdersStart = (state, action) => {
    return updateObject(state, { loading: true });
};

const fetchOrdersSuccess = (state, action) => {
    return updateObject(state, {
        orders: action.orders,
        loading: false
    });
};

const fetchOrdersFail = (state, action) => {
    return updateObject(state, { loading: false });
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.PURCHASE_INIT: return purchaseInit(state, action);
        case actionTypes.PURCHASE_BURGER_START: return purchaseBurgerStart(state, action);
        case actionTypes.PURCHASE_BURGER_SUCCESS: return purchaseBurgerSuccess(state, action);
        case actionTypes.PURCHASE_BURGER_FAIL: return purchaseBurgerFail(state, action);          
        case actionTypes.FETCH_ORDERS_START: return fetchOrdersStart(state, action);
        case actionTypes.FETCH_ORDERS_SUCCESS: return fetchOrdersSuccess(state, action);
        case actionTypes.FETCH_ORDERS_FAIL: return fetchOrdersFail(state, action);       
        default: return { state };
    }
};

export default reducer;

【问题讨论】：

请正确编辑您的代码以便理解
请提供一个带有更多代码的代码笔。帮助会容易得多
你怎么称呼purchaseBurgerSuccess()？您将什么数据传递给第一个参数？
我认为，你必须分配 state = initialState

标签： javascript reactjs redux reducers

【解决方案1】：

请检查状态参数这个参数没有状态数组，可以使用console.log查看这个参数有什么。

【讨论】：

它说它是 (orders: []) - 未定义。我试图用一些数据初始化数组，但它仍然是“未定义的”。
当你调用该函数时，空对象中的状态尝试设置 state = initialState，如果有人用空对象调用它，它使用初始状态值

【解决方案2】：

我认为您缺少将状态分配为参数中的初始状态。

const purchaseBurgerSuccess = (state = initialState, action)

【讨论】：

【解决方案3】：

1) 这行...

case actionTypes.PURCHASE_BURGER_SUCCESS: return purchaseBurgerSuccess(state, action);

...与switch 语句中的所有其他行一样，应该返回一个新状态。

所以在purchaseBurgerSucess 中，您需要确保使用您传入的状态作为参数返回一个新状态：

const purchaseBurgerSuccess = (state, action) => {
  const newOrder = updateObject(action.orderData, { id: action.orderId });

  // Spread out the state you pass in as an argument
  // and update those properties that have changed
  return {
    ...state,
    loading: false,
    purchased: true,
    orders: state.orders.concat(newOrder)
  };
};

注意：您的其他功能也落入了这个陷阱，因此也需要更新。

2) 您在switch 语句中的default 案例应该是：

default: return state;

【讨论】：