reactjs - React-Router 路由组件在页面刷新时构造两次

Question

我有一个组件，可以在与 /testRoute 关联的组件的 componentDidMount 中使用 setInterval 启动计时器。

看起来像:

componentDidMount() {
        if (this.timer == null) {
            var timerFunction = function() { this.tick() }.bind(this)
            this.timer = setInterval(timerFunction, 500);   
        }
    }

我有一个平衡的代码行，用于在组件“消失”时删除计时器(不确定此生命周期钩子(Hook)在多大程度上相当于对象死亡，例如被释放)，

componentWillUnmount() {
        clearInterval(this.timer)
    }

问题是，如果我在路线 /testRoute 上并且刷新浏览器，constructor() 会被调用两次，componentDidMount。此时，有两个“计时器”在滴答作响。如果我导航到另一条路线，则会调用 componentWillUnmount 并清除其中一个计时器。但仍然剩下一个。

我的组件在页面刷新时应点击 componentDidMount 两次，这是预期的行为吗？如果是这样，我如何确保只设置一个计时器？

编辑:

-用一个框架示例演示这一点:

function Nav() {    
        return (
            <ul className='nav'>
            <li><Link to='/test'>test</Link></li>
            </ul>
            )
    
}

只有一条路线:

class App extends React.Component {

    render() {
        return (
            <Router>
            <div>
            <Nav />
            <Route path='/test' component={Test} />
            </div>
            </Router>
            )
    }
}

还有一个简单的组件:

class Test extends React.Component {
    constructor() {
        super()
        console.log("constructor")
    }
    render() {
        return <div>test</div>
    }
}

在此代码中:刷新 /test 时，“构造函数”会两次记录到控制台。

Answer 1

我有类似的问题，我的组件安装了两次。就我而言，我在 componentDidMount 中发出了一个请求，该请求调用了两次。我通过异步调用(App.ROUTES)从服务器获取一些路线，并将一些路线呈现为静态(routeInfo.insideDashboard)。并且静态组件安装两次。

<Dashboard specialMenu={this.state.menu}>
    <Switch>
        {routeInfo.insideDashboard.map(route =>
            <Route exact key={route.path} path={route.path} component={Auth(route.component)}/>)}
        {App.ROUTES.map(route => <Route key={route.urlPath} exact path={"/" + route.urlPath} 
            component={Auth(asyncComponent(route.importPath, {title: route.title}))}/>)} 
        <Route component={NotFound}/>
     </Switch>
</Dashboard>

我怀疑原因可能是静态路由(routeInfo.insideDashboard)渲染两次，在其他路由来自服务器之前和之后。我在渲染路由之前添加了一个检查 routesFromServerTaken ，以确保路由(定义)仅渲染一次。

<Dashboard specialMenu={this.state.menu}>
    <Switch>
        {routesFromServerTaken ? routeInfo.insideDashboard.map(route =>
            <Route exact key={route.path} path={route.path} component={Auth(route.component)}/>): null}
        {App.ROUTES.map(route => <Route key={route.urlPath} exact path={"/" + route.urlPath} 
            component={Auth(asyncComponent(route.importPath, {title: route.title}))}/>)} 
        <Route component={NotFound}/>
     </Switch>
</Dashboard>

这解决了我的问题，组件现在只安装一次。