Итак, у меня есть компонент Task, и каждый раз, когда задача завершается, я пытаюсь обновить счетчик в родительском компоненте Bot, который содержит все задачи. Однако, когда я щелкаю все задачи одновременно, состояние (полные задачи) меняется, а не строго увеличивается.

Мой компонент Task, где я вызываю родительскую функцию incrementCompletedTasks (каждая задача занимает разное время для выполнения, поэтому у меня есть setTimeout):

const Task = ({ task, eta, onTaskCompletion }) ={amp}gt; { const [isLoading, setLoading] = useState(false) const [isCompleted, setCompleted] = useState(false) const seconds = eta / 1000; const taskCompletion = () ={amp}gt; { onTaskCompletion() setLoading(false) setCompleted(true) } const handleTaskCompletion = () ={amp}gt; { setLoading(true) setTimeout(taskCompletion, eta) } return ( {amp}lt;div{amp}gt; { isCompleted ? {amp}lt;p className="completedTask"{amp}gt;{task} {seconds} {seconds {amp}gt; 1 ? "seconds": "second"}{amp}lt;/p{amp}gt; : {amp}lt;p className="task"{amp}gt;{task} {seconds} {seconds {amp}gt; 1 ? "seconds": "second"}{amp}lt;/p{amp}gt; } { isCompleted ? {amp}lt;img src={checkmark} className="image" alt="checkmark"/{amp}gt; : (isLoading ? {amp}lt;img src={loading} className="image" alt="loading" /{amp}gt; : {amp}lt;button onClick={handleTaskCompletion} type="button"{amp}gt;Complete Task{amp}lt;/button{amp}gt;) } {amp}lt;/div{amp}gt; ); } 

Мой компонент Bot, хук completeTasks должен увеличиваться каждый раз, когда Task вызывает его:

 const Bot = ({ name, type }) ={amp}gt; { const [completeTasks, setCompleteTasks] = useState(0) const incrementCompleteTasks = () ={amp}gt; { setCompleteTasks(completeTasks 1) } return ( {amp}lt;div className="Bot"{amp}gt; {amp}lt;header{amp}gt; {amp}lt;h2 className="botHeader"{amp}gt;{name}{amp}lt;/h2{amp}gt; {amp}lt;h3 className="botHeader"{amp}gt;{type}{amp}lt;/h3{amp}gt; {amp}lt;h4 className="botHeader"{amp}gt;Completed Tasks: {completeTasks}{amp}lt;/h4{amp}gt; {amp}lt;/header{amp}gt; { botData[type].tasks.map(t ={amp}gt; {amp}lt;Task task={t.task} eta={t.eta} key={t.eta} onTaskCompletion={incrementCompleteTasks}/{amp}gt;) } {amp}lt;/div{amp}gt; ); } 
Анна Ланзино

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,