我如何在React中编辑待办事项

小编典典

我如何在React中编辑待办事项

reactjs

我的问题是，当我单击编辑图标并编辑我的待办事项时，将其更新。然后编辑的待办事项在待办事项列表中显示新的待办事项。新待办事项和旧的待办事项（我已经编辑过）都显示在待办事项列表中。如何解决这个问题呢？如何在列表中显示待办事项…我已编辑过？谁能帮我吗。这是我的代码..
todoApp.JSx

editTask:function(todo_id,newValue,todoStartDate,todoEndDate){
        console.log(todo_id,newValue,todoStartDate,todoEndDate);
        axios.post('/edittodos',{
            todo_id:todo_id,
            todo_text:newValue,
            todo_start_at:todoStartDate,
            todo_end_at:todoEndDate
        }).then(function (response){

        }).catch(function (error){



       });
//how to display todo in list after editing todo
            this.setState({
                todos:[
                {
                    todo_text:newValue,
                    todo_start_at:todoStartDate,
                    todo_end_at:todoEndDate
                 },
                ...this.state.todos,
                ]
             });

        },

todo.jsx

阅读 322

2020-07-22

共1个答案

小编典典

问题出在您的setState中，您实际上是在添加待办事项而不是替换它

做喜欢

var todos = [...this.state.todos];
   var index = todos.findIndex((todo) => todo.todo_id == todo_id)
   todos[index].todo_text = newValue
   todos[index].todo_start_at = todoStartDate
   todos[index].todo_end_at=todoEndDate
   this.setState({
                todos
             });

2020-07-22