在分页减少器中添加数据-reactjs

Question

我只想问一下，即使值是数组，为什么我的reducer仍然继续覆盖嵌套的数据。 基本上，我在这里构建的功能就像一个分页。 到目前为止，这是我的代码：

const INITIAL_STATE = {
    data: [],
    page: 1
};

export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case GET_NEWS_SUCCESS: {
            return { 
                data : {
                    [action.payload.category]: [ action.payload.data ]
                },
                page: action.payload.page };
        }
    }

    return state;
}

下图是我的reducer的返回数据，基本上是在echelon array上的下一个状态的0键应该仍然存在，并将附加另一组数据。 但是，正如您在第二个红色矩形上看到的那样，它会覆盖先前的0键。

Answer 1

您可以在这些行中覆盖现有数组：

 data : {
     [action.payload.category]: [ action.payload.data ]
 },

您应该将新对象附加到现有数组。 您可以使用传播语法来实现它：

case GET_NEWS_SUCCESS: {
            if (!state.data[action.payload.category]) {
               state.data[action.payload.category] = [];
            }
            return { 
                data : {
                     [action.payload.category]: [ ...state.data[action.payload.category], action.payload.data ]
                },
                page: action.payload.page };
        }