Как изменить useState перед history.pu sh в реагирующем маршрутизаторе

Question

Я пытаюсь изменить состояние в родительском контейнере onClick, который должен будет внести изменения на следующем маршрутизаторе, маршрутизируемом history.push. Но когда я изменяю состояние по щелчку вместе с маршрутизацией, происходит маршрутизация, и изменения не отображаются до нового рендеринга. Как я могу решить это? Я вставлю код

<OptionButton
  style={{ marginTop: 22 }}
  onClick={() => {
    setAnimationClass('none');
    history.push('information');
  }}
>

Мне нужно, чтобы setAnimationClass выполнялся до history.pu sh

Answer 1

Из документации React:

setState () не изменяет немедленно this.state, но создает переход состояния ожидания. Доступ к this.state после вызова этого метода потенциально может вернуть существующее значение.

Нет гарантии синхронной работы вызовов setState, и вызовы могут быть пакетированы для повышения производительности.

Если вы хотите, чтобы что-то происходило с абсолютной гарантией только после setState, реагирующие документы предлагают решение - используйте либо обратный вызов setState, либо метод componentDidUpdate.

Если вы используете хуки, тогда можно использовать useEffect , Пример:

const [animationClass, setAnimationClass] = useState()

const onClick = () => {
  setAnimationClass('none')
}

useEffect(() => {
   if(animationClass ==='none') history.push('information')
}, [animationClass])

Answer 2

Вы устанавливаете его только на 'none' при навигации на 'information'? Возможно, вы могли бы использовать useEffect (), чтобы добиться цели. Если вы изменяете animationClass где-либо еще, может быть разумнее создать другое свойство состояния и изменить его в вашем onClick и прослушать эти изменения в useEffect

useEffect(() => {
  if (animationClass === 'none') {
    history.push('information');
  }
}, [animationClass]);