Question

我试图仅在props更改时渲染组件，不幸的是，即使props不变，它也保持渲染，我的代码如下：

componentDidUpdate(prevProps,prevState){

    if(prevProps.data !== this.props.data){
        this.props.getData(userID)
      }
   }


    render(){
   //console.log('render') infinite rendering even when this.props.data is unchanged 
       return(
          <Mycomponent data={this.props.data}/>
      )
  }

const mapStateToProps = (state) => ({
    data: state.api.data,

})

export default connect(mapStateToProps, mapDispatchToProps)(Component1)

Answer 1

我相信使用PureComponent代替Component将确保该组件仅在接收新信息时才呈现。这就是我的方法：

import React, { PureComponent } from "react";
import Mycomponent from "./Mycomponent";

export default class WrapperComponent extends PureComponent {
  componentDidUpdate(prevProps,prevState){

    if(prevProps.data !== this.props.data){
        this.props.getData(userID)
      }
   }


    render(){
       return(
          <Mycomponent data={this.props.data}/>
      )
  }
}

Answer 2

从docs，

getDerivedStateFromProps在初始安装和后续更新上都在调用render方法之前被调用。它应该返回一个对象以更新状态，或者返回null则不更新任何内容。

您必须使用此方法，

static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.someValue!==prevState.someValue){
     //do something
  }
  else return null;
}

道具更改时反应渲染

2 个答案: