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

Question

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

来自类子的数据：{数据}

预期输出：来自类子的数据：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});
}
}