Question

在更改组件的状态然后更改url时，预先安装的组件不会卸载
问题仅适用于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>

单击按钮
等待重定向
返回
页面仍显示：“正在加载...”

返回时重置状态的最佳解决方案是什么？

Answer 1

我发现此问题与野生动物园back-forward cache有关。解决上述问题的一种方法是侦听pageshow事件，然后检查加载的页面是否已缓存。

purchase_sum

编辑：library(dplyr) foo %>% group_by(sales_month, abs(purchase_sum)) %>% filter(n_distinct(sign(purchase_sum)) > 1) %>% pull(sales_month) %>% unique #[1] "2019-02-01" "2019-04-01" "2019-05-01"事件仅触发一次，这是已知的webkit bug。为避免这种情况，您实际上必须使用componentDidMount() { window.addEventListener('pageshow', (event) => { // fix for safari cached page if (event.persisted) { this.setState({ isLoading: false }); } }); }重设所有内容。这样，事件将在下次再次触发。

精确的生命周期方法不会触发野生动物园中的修正

1 个答案: