如何仅在第一次渲染 childComponent 时跳过 childComponent 中 getDerivedStatefromProps() 中的状态更新

Question

Hi I'm new to Reactjs. I want {this.state.data} of the below childComponent to be incremented 5 on each time this component is getting loaded. So i'm doing that under the static method getDerivedStateFromProps(props,state) But for the first time when it is loading {this.state.data} should be the initial value i have defined (Here it is 0). So i'm expecting the below line output to be incremented 5 starting from 0(initial value i defined)
Data from ClassChild : {data}

预期输出： 来自 ClassChild 的数据：0 来自 ClassChild 的数据：5 来自 ClassChild 的数据：10 来自 ClassChild 的数据：15

实际输出： 来自 ClassChild 的数据：5 来自 ClassChild 的数据：10 来自 ClassChild 的数据：15 来自 ClassChild 的数据：20

Is there anyway to skip the first time execution of getDerivedStateFromProps(props,state), instead of defining the -5 value in constructor to get the expected output?

class ClassChild extends Component{
    constructor(props){
        super(props)
        console.log("ClassChild constructor()")
        this.state = {
            data : 0
        }
    }
    static getDerivedStateFromProps(props,state){
        console.log("ClassChild getDerivedStateFromProps()")
        return {
            data : state.data + props.childIncState
        }
    }
    render(){
        const {count, childIncState} = this.props
        const {data} = this.state
        return(
            <div>
                <div>Count from ClassParent : {count}</div>
                <div>Value to be incremented in ClassChild : {childIncState}</div>
                <div>Data from ClassChild : {data}</div>
                {console.log("ClassChild render()")}
            </div>
        )
    }
}
export default ClassChild;```

Answer 1

你应该使用 componentDidUpdate()。初始渲染时不调用它。

这是一个例子：

componentDidUpdate(prevProps) {
   if(prevProps.childIncState !== this.props.childIncState) {
      setState({data: this.state.data + props.childIncState});
   }
}

如何仅在第一次渲染 childComponent 时跳过 childComponent 中 getDerivedStatefromProps() 中的状态更新

How to skip the update of state inside getDerivedStatefromProps() in childComponent only for the first time of rendering the childComponent

reactjs

getderivedstatefromprops