在 react native 中管理道具更改

Question

我正在使用 react native 构建一个约会应用程序，这是我在 RC 中的第一次尝试，使用 react-redux 来管理状态。我需要对生命周期方法进行一些澄清。

详情.js

class Details extends Component {
constructor(props) {
super(props);
}
componentDidMount(){
this.props.bookingAndSuggestions(Data)
}
componentWillReceiveProps(nextProps){
if( Object.keys(nextProps.bookingSuggestionStatus).length >0) {
if(nextProps.bookingSuggestionStatus.res.data.status=='available') {
this.setState({isAvailable:false})
} else {
this.setState({isAvailable:true})
}} }
onBookNow=()=>{
this.props.shops(Data);
}

这是交易，最初我调用 react-redux 动作道具this.props.bookingAndSuggestions(Data)，我在componentWillReceiveProps内部捕获响应，并且在预订时this.props.shops(Data);会触发并且它还会更新componentWillrecieveprops，每次道具更改时，组件内的逻辑都会更新。处理这种情况的正确方法是什么？

Answer 1

componentWillReceiveProps不仅在道具更改时调用，而且在父级重新渲染时调用，因此每当调用它时，状态都会被评估并重新设置。

您有两个选择

1. 如果你没有在内部修改isAvailable状态，你可以直接从 props 使用它。

例如：

const isAvailable = this.props.bookingSuggestionStatus && this.props.bookingSuggestionStatus.res.data.status=='available'

2. 如果你正在修改它，那么你需要检查道具是否发生了变化，你可以在componentWillReceiveProps中这样做(从 v16.3.0 开始使用getDerivedStateFromProps)

例如：

componentWillReceiveProps(nextProps){
if(!_.isEqual(nextProps.bookingSuggestionStatus, this.props.bookingSuggestionStatus) && Object.keys(nextProps.bookingSuggestionStatus).length >0) {
if(nextProps.bookingSuggestionStatus.res.data.status=='available') {
this.setState({isAvailable:false})
} else {
this.setState({isAvailable:true})
}
} 
}