我如何编辑todo in react

Question

我的问题是，当我单击"编辑图标"并编辑我的TODO时。然后，编辑的Todo在todo-list.new Todo和Old Todo(我已经编辑(中都显示了新的Todo。如何解决这个问题呢？如何在列表中显示待办事项...我已经编辑了？谁能帮我吗。这是我的代码。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

Answer 1

问题在您的设定状态，实际上是在添加todo而不是更换

这样做

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
             });