私たちの支柱が変更されたらreact.jsのコンポーネントを更新するにはどうすればいいですか？

Question

私の小道具が変わるたびに私のページを変更したいです。私の小道具は、APIからprop.idに対応する特定のデータを取得するという点で重要です。今、prop.idのAPIリクエストはcomponentWillMount（）の部分にあるため、一度しか実行されません。私はwhenver私prop.idの変更は、変更したい、と私はいつでも小道具の変更私のページを更新する

componentWillReceiveProps(newProps) {  
    console.log('Component WILL RECIEVE PROPS!') 
} 

shouldComponentUpdate(newProps, newState) { 
    return true; 
} 

を使用する必要があると思いますが、私はこれがどのように動作するか本当にわかりません。私は、コンポーネントが変更されたときにコンポーネントWillReceivePropsが実行されると思いますが、私のpropが変更されたときにページを更新し続けるshouldComponentUpdateを変更する方法がわかりません。

ヒント？

EDIT：

に進み、詳細/ IDページ

 return data.map((eachData, index) => { 
      return ( <Link to={{ pathname: '/details/' + parseID(eachData.url) }}><PokemonInfo poke={ eachData } key={ index } /></Link>); 
     }); 
    }; 

に私を指示したリンク "/詳細/" だけのIDです+ parseID（eachData.url）対応するデータ次と前の部分はid + - 1でページをレンダリングしなければなりません。動作しますが、アップデートが遅れてしまい、実際の小道具を得るためにダブルクリックする必要があります。

class PokemonDetails extends React.Component { 

    constructor() { 
     super(); 


     this.state = { 


      pokemon: [], 
      imgurl: '', 
      abilities: [], 
      types: [] 
     }; 


    }; 


    componentWillMount() { 
    // Called first time the comp is loaded right before the comp is added to the page 
     console.log('Component WILL MOUNT!') 
     console.log("passed" , this.props.match.params.id) 
     var url = "https://pokeapi.co/api/v2/pokemon/" + this.props.match.params.id; 

     axios.get(url) 

     .then((response) => { 
      // setState re-renders component 
      this.setState({ 
       pokemon: response.data, 
       imgurl: response.data.sprites.front_default, 
       abilities: response.data.abilities, 
       types: response.data.types, 
      }) 

      console.log(this.state.pokemon) 
      console.log('url', this.state.imgurl) 
     }) 

      .catch((error) => { 
       console.log(error); 
     }) 
    } 

    componentWillReceiveProps(newProps) {  
     console.log('Component WILL RECIEVE PROPS!') 
     console.log("passed" , this.props.match.params.id) 
     var url = "https://pokeapi.co/api/v2/pokemon/" + this.props.match.params.id; 

     axios.get(url) 

     .then((response) => { 
      // setState re-renders component 
      this.setState({ 
       pokemon: response.data, 
       imgurl: response.data.sprites.front_default, 
       abilities: response.data.abilities, 
       types: response.data.types, 
      }) 

      console.log(this.state.pokemon) 
      console.log('url', this.state.imgurl) 
     }) 

      .catch((error) => { 
       console.log(error); 
     }) 
    } 

    shouldComponentUpdate(newProps, newState) { 
     if(newProps.match.params.id != this.props.match.params.id) return true; 
     return false; 
    } 

    render() { 

     let abilities = this.state.abilities.map((ability, idx) => { 
      return(
       <Label key = { idx }> 
        { ability.ability.name } 
       </Label> 
      ) 
     }); 

     let types = this.state.types.map((type, idx) => { 
      return(
       <Label key = { idx }> 
        { type.type.name } 
       </Label> 
      ) 
     }); 

     return (

       <div className="Home"> 
        <h1>Gotta catchem all!</h1> 
        <div className="Menu"> 
         <Link to="/"><span className="menuSpan">Search</span></Link > 
         <Link to="/gallery"><span className="menuSpan">Gallery</span></Link > 

         </div>    
       <div> 
        <img src= { this.state.imgurl } /> 
        <h2>{ this.state.pokemon.name }</h2> 

         <h3> 
          <Link onChange = { this.handleChange } to={{ pathname: '/details/' + (parseInt(this.props.match.params.id) - 1) }}><span>Prev</span></Link> 
          Pokedex #{ this.state.pokemon.id } 
          <Link onChange = { this.handleChange } to={{ pathname: '/details/' + (parseInt(this.props.match.params.id) + 1) }}><span>Next</span></Link> 
         </h3> 
         <h3> 
          Height { this.state.pokemon.height } 
         </h3> 
         <h3> 
          Weight <label>{ this.state.pokemon.weight }</label> 
         </h3>  
         <h4>Abilities</h4> 
         { abilities } 
         <h4>Type(s)</h4> 
         { types } 


       </div> 
      </div> 

     ); 
    } 
} 

Answer 1

shouldComponentUpdateで条件を設定できます。 shouldComponentUpdateがtrueの値を返すと、コンポーネントのrender関数が呼び出されます。だからこのようなことをすることができます。

shouldComponentUpdate(newProps, newState) { 
    if(newProps.id!==props.id) { 
     return true 
    } 
    return false; 
}