更新项目数组中的单个值 | react-redux

IT技术 javascript reactjs redux state reducers
2021-03-06 18:04:39

我有一个待办事项列表,如果用户单击“完成”,我想将数组中该项目的状态设置为“完成”。

这是我的行动:

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

这是我的减速机:

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

我遇到的问题是新状态不再具有与所选项目上的该待办事项相关联的文本,并且 ID 不再存在。这是因为我正在覆盖状态并忽略以前的属性吗?我的对象项 onload 如下所示:

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

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

3个回答

您需要转换您的 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

就个人而言,我使用 ImmutableJS ( https://facebook.github.io/immutable-js/ ) 解决了它的问题updateInsetIn方法(对于具有大量键的大型对象和数组,它们比普通对象和数组更有效,但对于小的更慢)。

我看到您使用的是单行 if 语句,但我发现阅读起来很棘手。当有 if 语句时,我知道减速器炸弹。您能否解释这里发生的事情以及可能的另一种编写此逻辑的方式?
2021-04-26 18:04:39
感谢您对 TomW 的帮助,并感谢您对有关深度状态更新的库的引用。很大的帮助!
2021-05-05 18:04:39
当您不从每个分支返回状态时,Reducers 会“爆炸” -if语句很好,只是您需要确保“返回状态”;之后if如果您查看下方的 TOGGLE_TODO 处理程序:redux.js.org/docs/basics/Reducers.html#handling-more-actions,您会看到一个与我的非常相似的示例,它使用if语句而不是?:-?:有一个与 if 语句相比有一点好处,因为它迫使您从每个分支返回一个值。
2021-05-16 18:04:39

新状态不再具有与所选项目上的待办事项相关联的文本,并且 ID 不再存在,这是因为我正在覆盖状态并忽略以前的属性吗?

是的,因为在每次更新期间,您都会分配一个只有一个key的新数组completed,并且该数组不包含任何以前的值。所以更新数组后将没有以前的数据。这就是为什么更新后文本和 ID 不存在的原因。

解决方案:

1-使用array.map找到正确的元素然后更新值,像这样:

case "COMPLETE_TASK":
    return {
        ...state,
        todos: state.todos.map(todo => 
            todo.id === action.id ? { ...todo, completed: action.completed } : todo
        ) 
    };

2- 使用array.findIndex找到该特定对象的索引,然后更新它,像这样:

case "COMPLETE_TASK":
    let index = state.todos.findIndex(todo => todo.id === action.id);
    let todos = [...state.todos];
    todos[index] = {...todos[index], completed: action.completed};
    return {...state, todos}

检查此代码段,您将更好地了解您正在犯的错误:

let state = {
  a: 1,
  arr: [
    {text:1, id:1, completed: true},
    {text:2, id:2, completed: false}
  ]
}

console.log('old values', JSON.stringify(state));

// updating the values

let newState = {
   ...state,
   arr: [{completed: true}]
}

console.log('new state = ', newState);

React 中一项开创性的设计原则是“不要改变状态”。如果要更改数组中的数据,则需要使用更改后的值创建一个新数组。

例如,我在 state 中有一个结果数组。最初,我只是将构造函数中的每个索引的值设置为 0。

this.state = {           
       index:0,
        question: this.props.test[0].questions[0],
        results:[[0,0],[1,0],[2,0],[3,0],[4,0],[5,0]],
        complete: false         
};

稍后,我想更新数组中的一个值。但我不会在状态对象中更改它。在 ES6 中,我们可以使用扩展运算符。数组切片方法返回一个新数组,它不会改变现有数组。

updateArray = (list, index,score) => {
   // updates the results array without mutating it
      return [
        ...list.slice(0, index),
        list[index][1] = score,
       ...list.slice(index + 1)
     ];
};

当我想更新数组中的一项时,我调用 updateArray 并一次性设置状态:

this.setState({
        index:newIndex, 
        question:this.props.test[0].questions[newIndex],
        results:this.updateArray(this.state.results, index, score)
});