Récupérer depuis componentDidMount dans React JS

Question

J'ai un composant <BaseMap /> et une ligne d'extraction fetchUser={this.fetchUser.bind(this)} que j'ai utilisé immidiatelly après le BaseMap dans la méthode de rendu (par exemple <BaseMap fetchUser={this.fetchUser.bind(this)}/>).

Cependant, quelqu'un a conseillé d'être que je devrais le mettre dans componentDidMount à la place. Mais comment dois-je le faire? Je ne peux pas simplement copier fetchUser={this.fetchUser.bind(this)} dans componentDidMount.

Answer 1

D'après ce que je comprends, vos composants sont mis en place comme suit:

class Parent .... { 
    .... 
    fetchUser(){ 
    .... 
    } 

    .... 
    render(){ 
     return ( 
     ... 
      <BaseMap fetchUser={this.fetchUser.bind(this)}/> 
     ... 
     ); 
    } 
} 

class BaseMap .... { 
    .... 
    render(){ 
     let user = this.props.fetchUser(); 
     return ( 

      <div> { ...use user here ... }</div> 

     ); 
    } 
} 

S'il vous plaît me corriger si je me trompe. Ce qui vous est conseillé de faire est de prendre l'appel à fetchUser de la méthode de rendu des composants BaseMap et de passer à sa méthode componentDidMount. Puis stockez l'utilisateur dans l'état du composant et utilisez-le à partir de là.

class BaseMap .... { 
    constructor(props){ 
     super(props); 
     this.state={user:null}; 
    } 

    componentDidMount(){ 
     let user = this.props.fetchUser(); 
     this.setState({user:user}); 
    } 

    render(){ 
     return ( 
      <div> {this.state.user? 
         ...use user here ... 
         : "loading data" 
      }</div> 
     ); 
    } 
} 

Answer 2

Déplacez votre méthode fetchUser-BaseMap composant, puis appeler la méthode componentDidMount comme this. fetchUser(). Sinon, passez la méthode comme accessoires et accédez-y dans votre composant cible.