如何在reactjs中更新todo列表项？

我正在使用react和redux编写todolist应用程序。 以下是我的初始状态：

export const initialState = {
todoList:[
    {
        taskId:1
        task: 'gym'
        completed: true
    },
    {
        taskId:2
        task: 'buy dinner'
        completed: false
    }
]
}

const todoReducer = (state=initialState,action) => {
switch(action.type){
    case UPDATE_TODO:
        return Object.assign({}, state, {
            todoList: state.todoList.map(todo =>
                {
                    return todo.taskId === action.payload.taskId ?
                    Object.assign({},todo, {
                        task: action.payload.task,
                        completed: action.payload.completed
                    }) : todo
                }
            )
        })
    default: 
        return state;
}
}
export default todoReducer;

---

如果我想将第二个任务更新为“buy book”，并将completed更改为true，那么如何在我的reducer中添加代码？上面的代码现在不起作用。不知道原因。有人能帮忙吗？

试试这个：

减速器

const initialState={
托多利斯特：[
{
taskId:1，
任务：“健身房”，
已完成：正确
},
{
taskId:2，
任务：“购买晚餐”，
已完成：false
}
]
};
常量todoReducer=（状态=初始状态，操作）=>{
开关（动作类型）{
案例“更新\待办事项”：
const{payload}=动作；
返回{
……国家，
todoList:state.todoList.map（项=>{
if（item.taskId==有效负载.taskId）{
返回{
…项目，
任务：payload.task，
已完成：有效载荷。已完成
};
}否则{
退货项目；
}
})
};
违约：
返回状态；
}
};

单元测试：

const output=todoReducer（初始状态，{type:'UPDATE_TODO'，有效负载：{
taskId:1，
任务：“新任务”，
已完成：正确
}});
console.log（'output'，output）；

测试输出：

输出{todoList:
[{taskId:1，任务：'newTask'，completed:true}，
{taskId:2，任务：'购买晚餐'，已完成：false}]}

试试这个：

减速器

const initialState={
托多利斯特：[
{
taskId:1，
任务：“健身房”，
已完成：正确
},
{
taskId:2，
任务：“购买晚餐”，
已完成：false
}
]
};
常量todoReducer=（状态=初始状态，操作）=>{
开关（动作类型）{
案例“更新\待办事项”：
const{payload}=动作；
返回{
……国家，
todoList:state.todoList.map（项=>{
if（item.taskId==有效负载.taskId）{
返回{
…项目，
任务：payload.task，
已完成：有效载荷。已完成
};
}否则{
退货项目；
}
})
};
违约：
返回状态；
}
};

单元测试：

const output=todoReducer（初始状态，{type:'UPDATE_TODO'，有效负载：{
taskId:1，
任务：“新任务”，
已完成：正确
}});
console.log（'output'，output）；

测试输出：

输出{todoList:
[{taskId:1，任务：'newTask'，completed:true}，
{taskId:2，任务：'购买晚餐'，已完成：false}]}

您正在将

状态

参数的默认值设置为空数组。它应该等于

initialState

。另外，在

UPDATE\u TODO

的逻辑中，

TODO.taskId

是

未定义的。应该是
todo.id
@khan谢谢回复。当我编辑这个帖子时，这些都是打字错误。我现在更改了它们。已经有了关于这个的React/redux教程：@jcklopp我看到了你提到的那个。我使用了“TOGGLE_TODO”中的语法来更新我的TODO列表，但出现了“map is undefined”错误。您正在将
state
参数的默认值设置为空数组。它应该等于
initialState
。另外，在
UPDATE\u TODO
的逻辑中，
TODO.taskId
是
未定义的。应该是
todo.id
@khan谢谢回复。当我编辑这个帖子时，这些都是打字错误。我现在更改了它们。已经有了关于这个的React/redux教程：@jcklopp我看到了你提到的那个。我使用了“TOGGLE_TODO”中的语法来更新我的TODO列表，但是得到了“map is undefined”的错误，这是一个很好的工作。。。我用单元测试更新了我的答案。。。。检查您的代码并将其关联起来。。。仍然不工作，然后用更多代码/详细信息更新您的qn。。。我用单元测试更新了我的答案。。。。检查您的代码并将其关联起来。。。仍然不起作用，然后用更多代码/详细信息更新ur qn