Question

我有一个组件，其状态我希望定时更新定时功能，因此我有以下代码：

componentDidMount() {

    console.log("Stage.componentDidMount")

    // var self = this;
    if (this.timer == null) {
        console.log("create timer")

        var timerFunction = function() {
            console.log(this.timer);
        }.bind(this)

        this.timer = setInterval(timerFunction, 1000);  
    }
}

componentWillUnmount() {
    console.log("component will unmount")
    clearInterval(this.timer)
}

当我刷新子组件为此子组件的路径时，会出现问题。我注意到这个组件的父级呈现两次，因此这个组件构造函数和componentDidMount被调用两次。这创建了两个计时器，我的计时调用次数是两倍！

虽然在导航到此路线然后导航时不会出现问题，但当componentDidMount和componentWillUnmount调用相互平衡时，由于我所描述的原因刷新时会出现问题。

是否存在某种平衡功能或方法来阻止路径的子组件（在代码示例中显示的componentDidMount中创建计时器的子组件）创建多个计时器？

这是我的根文件，即设置路由并呈现“Renderer”，其中包含其构造函数被调用两次的子组件。

import React from 'react';
import ReactDom from 'react-dom';
import {BrowserRouter as Router, Route } from 'react-router-dom'
import './styles.css';

const NavLink = require( 'react-router-dom' ).NavLink

import Renderer from './renderer/Renderer'
import RootComponent from './componentsScratchPad/RootComponent'

function Nav() {    
        return (
            <ul className='nav'>
            <li><NavLink activeClassName="active" exact to='/componentsScratchPad'>scratch pad</NavLink></li>
            <li><NavLink activeClassName="active" exact to='/renderer'>renderer</NavLink></li>
            </ul>
            )

}


class App extends React.Component {

    render() {
        return (
            <Router>
            <div>
            <Nav />
            <Route exact path='/renderer' render={ () => <Renderer /> } />
            <Route exact path="/componentsScratchPad" render={ () => <RootComponent /> }/>
            </div>
            </Router>
            )
    }
}

ReactDom.render(<App />, document.getElementById('root'))

React，React-Router和setInterval

0 个答案: