Small application filling holes, subcomponents componentWillReceiveProps has been triggered to print

Background: the parent component a send values to child components b, when a new data with b component to apply colours to a drawing, but I found no change in time passed to the values of the component b, b component componentWillReceiveProps hooks or have been printed.

Subcomponents componentWillReceiveProps (nextProps) {if (nextProps. TimeAxisArr. ToString ()! = this. Props. TimeAxisArr. ToString ()) {/ / didn't change. They don't move the console log (' change! '); if (nextProps.timeAxisArr.length > 5) { this.setState({ timeAxisArrNomore: nextProps.timeAxisArr.slice(0, 5), statusMore: 'more', }) } else { this.setState({ timeAxisArrNomore: NextProps. TimeAxisArr, statusMore: 'noMore',})} else {console.log(' No change '); }}

The parent component operates on the state value because it calls renderidCardbtn () in render ()

{/ * upload id button, prioritise upload id button In showing signature button * /} {cardsContent. IdCardStatus = = = 1 && caseStatus = = 30? <View> {this. renderidCardbtn ()}</View> :null} // State renderidCardbtn () {// State renderidCardbtn () {// State renderidCardbtn () { Sign entry const {caseStatus, cardsContent } = this.state let viewBox if (cardsContent.idCardStatus === 1 && caseStatus == 30) { this.setState({ isShowIdBtn: true }, () => { viewBox = ( <View style="height:80rpx;" > <AtButton className=' fixedBottomBTN 'type='primary' onClick={this.uploadCard.bind (this)}> </AtButton> </View >  ) }) } else { this.setState({ isShyowIdBtn :false }) } return viewBox }

When I look up some information later, I find that I manipulated the value of state in render (), so it keeps refreshing. ComponentWillReceiveProps: In this callback function, you can update the state of your component by calling this.setState() based on the changes in the properties. Old properties can still be obtained using this.props, but it is safe to call the update state here. No additional render call is triggered

The render() method is very clean, which means that you don’t initialize the component’s state in this method, return the same value every time it’s executed, don’t read or write the DOM or interact with the server, and if you have to interact with the server, do it in the componentDidMount() method or another lifecycle method. Keeping the render() method pure makes the server more accurate and the components simpler

Reference: https://blog.csdn.net/wangche… https://blog.csdn.net/halo141…