當我們的道具改變時，我們如何更新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; 
} 

來更新我的網頁每當道具的變化，但我真的不知道這是如何工作。我認爲componentWillReceiveProps將在prop更改時運行，但我不確定如何更改shouldComponentUpdate以使頁面在更改prop時發生更新。

任何提示？

編輯：

引導我到細節/ ID頁面

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

進到一個鏈接 「/信息/」 + parseID（eachData.url），這僅僅是一個ID相應的數據。 Next和Prev部分應該使用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; 
}