Обновить состояние, затем перенаправить с помощью React Router Dom

Question

Я использую React 16.12.0, React Router DOM 5.1.2 для проекта и испытываю проблемы с перенаправлением только после успешного обновления состояния. По сути, у меня есть кнопка, при нажатии которой я хочу обновить состояние информацией, которую выбрал пользователь, а затем перейти на домашнюю страницу и показать баннер. Я использую React Hook useContext, который переносится на один из компонентов наивысшего уровня, а также объект истории из React Router Dom.

Ожидаемое поведение:

• Свойство состояния контекста ' showBanner 'имеет значение true
• Перейдите на страницу' / '

Существующее поведение:

• Перейдите на страницу' / '
• Свойство состояния контекста 'showBanner' остается ложным

Вот фрагмент кода:

// Import statements - useHistory() from react-router-dom, useContext from react, etc.

const browse = (props) => {
  const {globalState, dispatchGlobalState} = useContext(myContext);
  const history = useHistory();

  const handleButtonClick = (e) => {
    dispatchGlobalState( { type: 'showBanner', payload: true } );
    history.push('/');
  }

  return (
   <button onClick={handleButtonClick}>Click Me</button>
  )

Я также попытался обернуть отправку в Обещание, но безуспешно. ..

  const handleButtonClick = (e) => {
    new Promise( (resolve, reject) ) => {
      dispatchGlobalState( { type: 'showBanner', payload: true } );
    })
    .then( () => {
      history.push('/');
    }));

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

Answer 1

Вы можете использовать useEffect для запуска перенаправления. Зависимость для useEffect будет вашим globalState, который при изменении перенаправления происходит.

Убедитесь, что не вызываете useEffect при первоначальном рендеринге.

const browse = (props) => {
  const {globalState, dispatchGlobalState} = useContext(myContext);
  const history = useHistory();
  const isInitialRender = useRef(true);

  const handleButtonClick = (e) => {
    dispatchGlobalState( { type: 'showBanner', payload: true } );
  }

  useEffect(() => {
      if(!isInitialRender.current) {
         history.push('/');
      }else {
         isInitialRender.current = false;
      }

  }, [globalState])
  return (
   <button onClick={handleButtonClick}>Click Me</button>
  )