如何在React中编辑待办事项

Question

我的问题是，当我点击编辑图标并编辑我的待办事项更新它。然后那个编辑过的todo在todo-list中显示新的待办事项。新的待办事项和旧的待办事项（我编辑过）都显示在待办事项列表中。如何解决这个问题呢？如何在列表中显示待办事项...我编辑过？谁能帮我吗。 这是我的代码.. 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，你实际上是在添加一个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
             });