React中如何实现元素移除与动画？TodoList异常问题排查

我刚学习React，正在开发一个待办事项应用，组件结构包含Task函数组件、Tasks类组件、ToDoList类组件。添加任务时通过.add_task CSS类实现滑入动画，删除任务时计划通过.remove_task类实现动画，逻辑为点击删除按钮触发setClose将状态改为true，添加移除动画并在500ms后调用onRemoveClick移除任务。但实际效果不符合预期：Tasks组件传递的值正确，但Task组件显示内容与传入值不符，怀疑是提前更新任务状态导致问题。

Task函数组件代码 #

function Task(props){
    const [close, setClose] = useState(false);
    const [task, setTask] = useState(props.toDo);

    let animation = "task";
    console.log("[TASK] ", task)
    if (close){
        setTimeout(() => {props.onRemoveClick()}, 500);
    }
    close ? animation += " remove_task" : animation += " add_task";


    return(
        <div className={animation} key={props.id}>
           <input 
              className="task_text" 
              value={task} 
           />
           <div className="delete_task" onClick={() => {setClose(true);}}></div>
        </div>

    )

}

Tasks类组件代码 #

class Tasks extends React.Component{  
    renderTask(task, id){
        return <Task
            task = {task}
            id = {id}
            onRemoveClick = {() => this.props.onRemoveClick(id)}
       />
     }

     render(){
         const tasks = this.props.tasks.map((step, move) => {
             console.log("[TASKS] ", step)
             return(
                 this.renderTask(step, move)
             )
         })

         return (
            <div className="tasks">{tasks}</div>
        )
    }
 }

ToDoList类组件代码 #

class ToDoList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            tasks : []
        }
    }
    removeTask(id){
        const tasks = this.state.tasks;
        tasks.splice(id, 1)
        this.setState({tasks : tasks})
    }
    render(){
        return(
            <div className="ToDoList_box">
                <Tasks
                    tasks = {this.state.tasks}
                    onRemoveClick = {(id) => this.removeTask(id)}

                 />

            </div>
        )
    }
} 

异常效果说明 #

• 添加5个任务后显示正常
• 删除第3个任务后，Task组件显示内容与传入值不符

内容的提问来源于stack exchange，提问作者nyar