React：如何更新对象数组类型的状态属性

Question

我有以下状态 - 行动历史：

我的问题是我期望一个带有zoneCategories的状态：Array [8757]，所以我在我的reducer中做错了，这是：

let setZoneCategoriesReducer = function (zoneCategories = [], action) {
    switch (action.type) {
        case 'SET_CATEGORIES_FROM_SERVER':
            return [
                ...zoneCategories, action.zoneCategories
            ]
        default:
            return zoneCategories;
    }
}

export default setZoneCategoriesReducer

这是我的商店：

import {applyMiddleware, compose, createStore} from 'redux'
import rootReducer from './reducers'
import logger from 'redux-logger'
import thunk from 'redux-thunk'

let finalCreateStore = compose(
    applyMiddleware(thunk, logger())
)(createStore)

export default function configureStore(initialState = {zoneCategories: []}) {
    return finalCreateStore(rootReducer, initialState)
}

这是我的App入口点：

import React from 'react';
import App from './App';
import './index.css';
import { Provider } from 'react-redux';
import configureStore from './redux/store'
import { render } from 'react-dom'

let initialState = {
    zoneCategories: []
}

let store = configureStore(initialState)

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

另外，我的root reducer：

import { combineReducers } from 'redux'
import setZoneCategoriesReducer from './setZoneCategoriesReducer'

const rootReducer = combineReducers({
    zoneCategories: setZoneCategoriesReducer
})

export default rootReducer

我现在有心理障碍，有什么帮助吗？

Answer 1

在setZoneCategoriesReducer函数中，添加action.zoneCategories作为返回状态的元素，可能包含您实际需要的8757个元素。传播它而不是直接添加。

let setZoneCategoriesReducer = function (zoneCategories = [], action) {
// ...
        return [
            ...zoneCategories, ...action.zoneCategories
        ]
// ...
}

}