React Router 4 componentDidUpdate not firing

當我使用react-router更改路由時，componentDidUpdate是否會觸發？我修改了示例代碼，似乎無法使其工作。React Router 4 componentDidUpdate not firing

我做了家庭組件日誌一些文本，但它似乎沒有解僱。任何幫助表示讚賞，謝謝！

代碼：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import './index.css'; 
import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 

const BasicExample =() => (
    <Router> 
     <div> 
      <ul> 
       <li><Link to="/">Home</Link></li> 
       <li><Link to="/about">About</Link></li> 
       <li><Link to="/topics">Topics</Link></li> 
      </ul> 

      <hr/> 

      <Route exact path="/" component={Home}/> 
      <Route path="/about" component={About}/> 
      <Route path="/topics" component={Topics}/> 
     </div> 
    </Router> 
) 

class Home extends React.Component { 
    render() { 
     return (<div> 
      <h2>Home</h2> 
     </div>); 
    } 

    componentDidUpdate() { 
     console.log("Updated!"); 
    } 
} 


const About =() => (
    <div> 
     <h2>About</h2> 
    </div> 
) 

const Topics = ({ match }) => (
    <div> 
     <h2>Topics</h2> 
     <ul> 
      <li> 
       <Link to={`${match.url}/rendering`}> 
        Rendering with React 
       </Link> 
      </li> 
      <li> 
       <Link to={`${match.url}/components`}> 
        Components 
       </Link> 
      </li> 
      <li> 
       <Link to={`${match.url}/props-v-state`}> 
        Props v. State 
       </Link> 
      </li> 
     </ul> 

     <Route path={`${match.url}/:topicId`} component={Topic}/> 
     <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3> 
     )}/> 
    </div> 
) 

const Topic = ({ match }) => (
    <div> 
     <h3>{match.params.topicId}</h3> 
    </div> 
) 

ReactDOM.render(
    <BasicExample />, 
    document.getElementById('root') 
);

來源

2017-03-23 Bai Chan Kheo

作爲每DOC：

的更新可以通過改變道具或狀態引起的。這些方法被稱爲當組件被重新呈現：

componentWillReceiveProps（）

shouldComponentUpdate（）

componentWillUpdate（）

渲染（）

componentDidUpdate（）

componentWillUpdate：

componentWillUpdate（）被正在接收新道具或狀態時呈現之前立即被調用。在更新發生之前使用此作爲執行準備的機會。對於初始渲染，此方法不稱爲。

在首頁部分你沒有定義任何state並沒有使用任何props也that't爲什麼function將不會被調用。

檢查，當你點擊點擊我的文本這個例子componentWillUpdate將調用：

class Home extends React.Component { 
 
    
 
    constructor(){ 
 
     super(); 
 
     this.state = {a: false} 
 
    } 
 

 
    componentDidUpdate() { 
 
     console.log("Updated!"); 
 
    } 
 
    
 
    render() { 
 
     return (
 
      <div> 
 
       <h2>Home</h2> 
 
       <p onClick={()=>this.setState({a: !this.state.a})}>Click Me</p> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(<Home/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

來源

2017-03-23 09:28:03

React Router 4 componentDidUpdate not firing

回答

相關問題