Preact методы жизненного цикла не вызывают корректность в сафари - PullRequest
Новая
       21

Preact методы жизненного цикла не вызывают корректность в сафари

0 голосов
/ 21 мая 2019
  • при изменении состояния компонента и последующем изменении URL-адреса компонент preact не отключается
  • проблема специфична для IE и Safari
  • при использовании функции «вернуться назад» в браузере componentDidMount не срабатывает, и состояние не устанавливается в исходное значение

Вот пример, вы можете запустить локально, чтобы лучше понять. 

 <html>
        <head>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/preact/8.4.2/preact.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>  
        </head>
        <body>
            <div id="app"></div>
            <script type="text/babel">
              const React = preact;
              class Foo extends React.Component {
                state = {
                  loading: false
                }

                componentDidMount() {
                  console.log('mounted');
                }

                leave() {
                  this.setState({
                    loading: true
                  });
                  setTimeout(() => {
                    window.location.href = 'https://github.com/';
                  }, 2000);
                }
                
                render() {
                  return this.state.loading ? <div>loading...</div> : <button onClick={this.leave.bind(this)}>leave</button>;
                }
              }

              React.render(
                <Foo />,
                document.getElementById('app')
              );
            </script>
        </body>
    </html>
  • нажмите кнопку
  • ждать перенаправления
  • вернуться
  • страница по-прежнему показывает: «загрузка ...»

Что было бы лучшим решением для сброса состояния при возвращении?

1 Ответ

0 голосов
/ 22 мая 2019

Я обнаружил, что эта проблема связана с сафари кэш обратной пересылки . Решением описанной проблемы было бы прослушать событие pagehow и проверить, кэширована ли загруженная страница. 

componentDidMount() {
  window.addEventListener('pageshow', (event) => {
    // fix for safari cached page
    if (event.persisted) {
      this.setState({
        isLoading: false
      });
    }
  });
}

Edit: событие pageshow вызывается только один раз, и это известная ошибка webkit . Чтобы избежать этого, вам действительно нужно использовать window.location.reload() для сброса всего. Таким образом, событие снова будет запущено в следующий раз.

...