web-dev-qa-db-fra.com

composantDidUpdate ne se déclenche pas

Est-ce que composantDidUpdate est censé se déclencher lorsque je change de route à l'aide de react-router? J'ai modifié l'exemple de code et n'arrive pas à le faire fonctionner.

J'ai fait consigner du texte par le composant home, mais il semble que ce ne soit pas le cas. Toute aide est la bienvenue, merci!

Code:

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')
);
reactjsreact-router
8
Bai Chan Kheo

Selon le DOC :

Une mise à jour peut être provoquée par des modifications apportées aux accessoires ou à l'état. Ces méthodes sont appelés lors du re-rendu d'un composant:

composantWillReceiveProps ()

shouldComponentUpdate ()

composantWillUpdate () 

rendre() 

composantDidUpdate ()

composantWillUpdate:

composantWillUpdate () est appelé immédiatement avant le rendu lorsqu'il est nouveau les accessoires ou l'état sont reçus. Utilisez cela comme une opportunité pour effectuer la préparation avant la mise à jour. Cette méthode ne s'appelle pas pour le rendu initial.

Dans le composant Accueil, vous n'avez défini aucune variable state et vous n'utilisez aucune variable propsaussi, ce n'est pas pour cela que cette function ne sera pas appelée. 

Cochez cet exemple componentDidUpdate sera appelé lorsque vous cliquerez sur le texte Cliquez-moi:

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'/>

2
Mayank Shukla

Légère modification recommandée: le passage d'objets dans les méthodes setState est obsolète. Utilisez la propriété prevState et retournez sa valeur.

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((prevState) => ({a: !prevState.a}))}>Click Me</p>
                </div>
            );
        }
    }


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