更新项目数组中的单个值 |反应还原

我有一个待办事项列表，并且希望在用户单击“完成”时将数组中该项目的状态设置为“完成”。

这是我的行动：

export function completeTodo(id) {
    return {
        type: "COMPLETE_TASK",
        completed: true,
        id
    }
}

这是我的减速器：

case "COMPLETE_TASK": {
             return {...state,
                todos: [{
                    completed: action.completed
                }]
             }
        }

我遇到的问题是新状态不再具有与所选项目上的待办事项关联的文本，并且 ID 不再存在。这是因为我覆盖了状态并忽略了以前的属性吗？我的对象项加载如下所示：

Objecttodos: Array[1]
    0: Object
        completed: false
        id: 0
        text: "Initial todo"
    __proto__: Object
    length: 1
    __proto__: Array[0]
    __proto__: Object

如您所见，我想做的就是将完成的值设置为 true。

您需要转换您的 todos 数组以更新适当的项目。 Array.map 是执行此操作的最简单方法：

case "COMPLETE_TASK":
    return {
        ...state,
        todos: state.todos.map(todo => todo.id === action.id ?
            // transform the one with a matching id
            { ...todo, completed: action.completed } : 
            // otherwise return original todo
            todo
        ) 
    };

有一些库可以帮助您进行这种深层状态更新。您可以在此处找到此类库的列表：https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilities https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilities

就我个人而言，我使用 ImmutableJS (https://facebook.github.io/immutable-js/ https://facebook.github.io/immutable-js/）它解决了这个问题updateIn and setIn方法（对于具有大量键的大型对象和数组来说，这比普通对象和数组更有效，但对于小对象来说速度较慢）。