如何编辑待办事项

Question

我的问题是，当我点击编辑图标和编辑我的待办更新它。然后，编辑后的待办事项在待办事项列表中显示新的待办事项。新的待办事项和旧的待办事项(我已经编辑过)都显示在待办事项列表中。如何解决这个问题？如何在我编辑的list...which中显示待办事项？有人能帮我吗。这是我的密码。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

问题在于您的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
             });