Управляйте изменениями реквизита в реакции родных

Question

Я создаю приложение для встреч с реактивом native, это моя первая попытка в RC, использующий реагировать с избыточностью для управления состоянием. Мне нужны некоторые пояснения о методах жизненного цикла.

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

Вот сделка, вначале я вызываю prop-1008 * action-redux action, и я получаю ответ внутри componentWillReceiveProps, и при бронировании срабатывает this.props.shops(Data);, а также обновляетсяcomponentWillrecieveprops, логика внутри компонента будет обновляться каждый раз, когда изменяется реквизит. Каков правильный подход к такой ситуации?

Answer 1

componentWillReceiveProps вызывается не только при смене реквизита, но и при повторном рендеринге родителя и, следовательно, всякий раз, когда он вызывается, состояние оценивается и устанавливается снова.

У вас есть два варианта

1. Если вы не изменяете состояние isAvailable внутри, вы можете просто использовать его непосредственно из реквизита.

Например:

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

Если вы модифицируете его, вам нужно проверить, изменились ли реквизиты, что вы можете сделать в componentWillReceiveProps (используйте getDerivedStateFromProps начиная с v16.3.0 и далее)

Например:

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