javascript - React-Redux:将修改后的数组分配给状态中的属性

我正在使用React应用程序，正在使用Redux来存储状态。我有以下代码：

menu.actions.js：

import { apiUrl, apiConfig } from '../../util/api';
import { ADD_CATEGORY, GET_MENU } from './menu.types';

export const getMenu = () => async dispatch => {
    const response = await fetch(`${apiUrl}/menu`);
    if (response.ok) {
        const menuData = await response.json();
        dispatch({ type: GET_MENU, payload: menuData })
    }
}

export const addCategory = category => async dispatch => {
    const options = {
        ...apiConfig(),
        method: 'POST',
        body: JSON.stringify(category)
    };
    const response = await fetch(apiUrl + '/category/', options)
    let data = await response.json()
    if (response.ok) {
        dispatch({ type: ADD_CATEGORY, payload: { ...data } })
    } else {
        alert(data.error)
    }
}

menu.reducer.js：

import { ADD_CATEGORY, GET_MENU } from './menu.types';

const INITIAL_STATE = []

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case GET_MENU:
            return [...action.payload];
        case ADD_CATEGORY:
            return [ ...state, { ...action.payload, menuItem: [] } ]
        default:
            return state;
    }
}

在上面的Reducer中，初始状态是一个空数组。调度GET_MENU操作，更改初始状态，使其包含菜单项数组。

在GET_MENU操作中获取的数组如下：



我已经修改了Reducer函数中的代码，以便现在的初始状态如下：

menu.reducernew.js：

import { ADD_CATEGORY, GET_MENU } from './menu.types';

    const INITIAL_STATE = {
        menuArray: [],
        isSending: false
    };

    export default (state = INITIAL_STATE, action) => {
        switch (action.type) {
            case GET_MENU:
                return {
                ...state,
                menuArray: action.payload
            };
            case ADD_CATEGORY:
                return {
                ...state,
                menuArray: [ ...menuArray, { ...action.payload, menuItem: [] } ]
            };

            default:
                return state;
        }
    }

对于Reducer中的ADD_CATEGORY情况，我不确定将状态中的menuArray属性重新分配给修改后的数组的正确语法是什么。我希望数组具有在addCategory操作创建器中获取的新对象。

运行我的应用程序时，出现以下错误：



我不确定为什么会收到此错误或如何解决它。任何见解都表示赞赏。

最佳答案

在这里，未定义menuArray: [ ...menuArray, { ...action.payload, menuItem: [] } menuArray变量，您尝试将其传播。使用state.menuArray访问当前的menuArray。

更改：

menuArray: [ ...menuArray, { ...action.payload, menuItem: [] }

至：

menuArray: [ ...state.menuArray, { ...action.payload, menuItem: [] }

case ADD_CATEGORY:
     return {
          ...state,
        menuArray: [ ...state.menuArray, { ...action.payload, menuItem: [] } ]
};