reactjs - 如何仅在第一次渲染childComponent时跳过childComponent中getDerivedStatefromProps（）中的状态更新

Question

嗨，我是 Reactjs 的新手。每次加载此组件时，我希望以下 childComponent 的 {this.state.data} 递增 5。所以我在静态方法 getDerivedStateFromProps(props,state) 下这样做但是第一次加载时 {this.state.data} 应该是我定义的初始值（这里是 0）。所以我希望下面的行输出从 0 开始递增 5（我定义的初始值）

来自 ClassChild 的数据：{data}

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

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

无论如何要跳过getDerivedStateFromProps（props，state）的第一次执行，而不是在构造函数中定义-5值以获得预期的输出？

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