Question

如何将componentWillReceiveProps替换为“ getDerivedStateFromProps”？

  state = {
        start: null,
        end: null,
        isIncome: true,
    }

    componentWillReceiveProps = nextProps => this.setState({
        start: nextProps.start || null,
        end: nextProps.end || null,
        isIncome: nextProps.isIncome || false,
    })

Answer 1

getDerivedStateFrom道具会在初始渲染以及所有后续更新中调用，因此您还需要将prevProps存储在状态中以进行比较

对于您的用例，

state = {
        start: null,
        end: null,
        isIncome: true,
        prevProps: {}
}
static getDerivedStateFromProps(props, state) {
    const { prevProps } = state;
    if(prevProps.start !== props.start || prevProps.end !== props.end || prevProps.income !== props.income){
       return {
          start: props.start || null,
          end: props.end || null,
          isIncome: props.isIncome || false,
          prevProps: props
       }
    }
    return {
       prevProps: props
    }
}

还有React docs

中提到的其他处理更新的方法

派生状态导致冗长的代码并使您的组件   很难考虑。确保您熟悉更简单   替代方案：



如果您需要执行副作用（例如，数据获取或   动画）以响应道具更改，请使用componentDidUpdate   生命周期。



如果仅在道具更改时才想重新计算某些数据，请使用   而是备忘录助手。



如果您想在道具更改时“重置”某些状态，请考虑   用钥匙使组件完全受控或完全不受控制   代替。

如何将“ componentWillReceiveProps”替换为“ getDerivedStateFromProps”？

1 个答案: