Задержка в изменении состояния компонента react

Question

Задержка в изменении состояния компонента react

Илюшка Жиленков Ученик (90), на голосовании 1 год назад

У меня в компоненте при нажатии на кнопку должен меняться стейт и отправлятся через колбек функцию радителю этого компонента. Стейт меняется, но родителю компонента отправляется старый стейт, а новый только после повторного нажатия на кнопку. Как это исправить?

Answer 1

Проблема, вероятно, связана с тем, что функция sendSlideContentAndStatus() вызывается до того, как setStatus() успевает обновить стейт. Это может произойти из-за асинхронной природы работы setState() в React.

Одним из способов решения этой проблемы может быть использование колбек-функции внутри setState(), которая будет вызываться после того, как стейт будет обновлен. Пример:

 function setComponentStatusAndSend() { 
  setStatus("Сохранено'); 
  setStatusColor('#f5f5f5'); 
  sendSlideContentAndStatus(); 
} 
 
function sendSlideContentAndStatus() { 
  sendToParentSlideContent({header: slideHeader, body: slideBody, index: slideIndex}); 
  sendToParentComponentStatus(status); 
} 
 
// В функции setState() передаем колбек-функцию 
function setStatus(newStatus) { 
  setState({status: newStatus}, () => { 
    sendSlideContentAndStatus(); 
  }); 
}

Таким образом, колбек-функция будет вызвана после того, как стейт будет обновлен, и новое значение стейта будет передано в функцию sendSlideContentAndStatus(). Это позволит отправлять актуальное значение статуса родительскому компоненту.