React，Redux with immutable.js：从列表中删除一项时无法获取正确的状态数据

Question

我正在使用 React 16、Redux 和 immutable.js 练习 Todo 列表，但是当从 UI 中的项目列表中删除一个项目时（请参阅附件）。它将删除所有项目，只留下一个无法删除的项目。添加项目时，它工作正常，但不知道为什么状态中的数据行为不正确。有谁知道我的代码有什么问题？非常感谢您：

import { fromJS } from  'immutable';
import * as constants from './actionTypes';

const todoState = fromJS({
        isCompleted : false,
        inputValue : '',
        list: []
})

const todoReducer = function(state = todoState, action) {

    switch (action.type) {
        case constants.ADD_ITEM: 
            const list = state.get('list');
            const inputValue = action.payload;
            return state.set('list', [...list, {inputValue, isCompleted : false}]);
        case constants.REMOVE_ITEM:  {
            const list = state.get('list');
            const index = action.payload; // works correctly
            const newList = list.splice(index, 1);
            // will delete all the items and only left one which cannot be deleted
            return state.set('list', newList);
        }
        case constants.CHECK_ITEM:
            return state;
        default:
            return state;
    }
}

export default todoReducer;

Answer 1

从 Array.prototype.splice 返回的值是一个新数组，其中包含 已删除的 项，而不是其余项。原数组发生变异

你可以通过复制数组，拼接副本，然后返回来达到你想要的结果。

const newList = [...list];
newList.splice(index, 1);
return state.set('list', newList);

React，Redux with immutable.js：从列表中删除一项时无法获取正确的状态数据

React, Redux with immutable.js : Cannot get correct state data when delete one items from a list

reactjs

redux

immutable.js