使用React钩子从孩子改变父母的状态

Question

所以我有一个Task组件，每完成一个任务，我都会尝试更新父组件Bot中的计数器，该计数器可以保存所有任务。但是，当我同时单击所有任务时，状态（completeTasks）会波动，而不是严格增加。

“我的任务”组件，在这里我调用父函数crementCompletedTasks（每个任务花费不同的时间来完成，这就是为什么我有setTimeout的原因）：

const Task = ({ task, eta, onTaskCompletion }) => {
  const [isLoading, setLoading] = useState(false)
  const [isCompleted, setCompleted] = useState(false)
  const seconds = eta / 1000;

  const taskCompletion = () => {
    onTaskCompletion()
    setLoading(false)
    setCompleted(true)
  }

  const handleTaskCompletion = () => {
    setLoading(true)
    setTimeout(taskCompletion, eta)
  }

  return (
    <div>
      {
        isCompleted ? <p className="completedTask">{task} {seconds} {seconds > 1 ? "seconds": "second"}</p> : 
        <p className="task">{task} {seconds} {seconds > 1 ? "seconds": "second"}</p>
      }
      {
        isCompleted ? <img src={checkmark} className="image" alt="checkmark"/> :
        (isLoading ? <img src={loading} className="image" alt="loading" /> : 
        <button onClick={handleTaskCompletion} type="button">Complete Task</button>)
      }
    </div>
  );
}

我的Bot组件，其每次每次调用Task时，其completeTasks挂钩都应该递增：

const Bot = ({ name, type }) => {
  const [completeTasks, setCompleteTasks] = useState(0)

  const incrementCompleteTasks = () => {
    setCompleteTasks(completeTasks+1)
  }

  return (
    <div className="Bot">
      <header>
        <h2 className="botHeader">{name}</h2>
        <h3 className="botHeader">{type}</h3>
        <h4 className="botHeader">Completed Tasks: {completeTasks}</h4>
      </header>
      {
        botData[type].tasks.map(t => <Task task={t.task} eta={t.eta} key={t.eta} onTaskCompletion={incrementCompleteTasks}/>)
      }
    </div>
  );
}