javascript - 当 prop 发生变化时，我们如何更新 React.js 上的组件？

Question

每当我的 Prop 发生变化时，我愿意更改我的页面。我的 prop 很重要，因为它从 API 检索与 prop.id 相对应的特定数据。现在，我对 prop.id 的 API 请求位于 componentWillMount() 部分，因此它只运行一次。我想让它在我的 prop.id 改变时改变，我想我必须使用

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

shouldComponentUpdate(newProps, newState) {
  return true;
}

每当 prop 发生变化时更新我的​​页面，但我不太确定这是如何工作的。我认为 componentWillReceiveProps 会在 prop 更改时运行，但我不确定如何更改 shouldComponentUpdate 以使页面在 prop 更改时保持更新。

有什么建议吗？

编辑:

将我引导至详细信息/ID 页面的链接

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

继续到“/details/”+ parseID(eachData.url)，它只是相应数据的id。 Next 和 Prev 部分应该使用 id +- 1 渲染页面。它可以工作，但更新会延迟，我必须双击才能获取实际的 prop。

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;
}