Question

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

Details.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);时触发，并更新{{ 1}}，每次更改道具时组件内部的逻辑都会更新。处理这种情况的正确方法是什么？

Answer 1

componentWillReceiveProps不仅在更改道具时被调用，而且在父对象重新渲染时也被调用，因此，每当被调用时，状态就被撤消并重新设置。

您有两个选择

如果您未在内部修改isAvailable状态，则可以直接在props中直接使用它。

例如：

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

如果您要进行修改，则需要检查道具是否已更改，您可以在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})
      }
     } 
}

在本地响应中管理道具更改

1 个答案: