Prop değiştiğinde React bileşenini yeniden işleyin

Sunumsal bir bileşeni bir konteyner bileşeninden ayırmaya çalışıyorum. Bir SitesTableve bir var SitesTableContainer. Konteyner, mevcut kullanıcıya bağlı olarak uygun siteleri getirmek için yeniden düzenleme eylemlerini tetiklemekten sorumludur.

Sorun, kapsayıcı bileşeni başlangıçta oluşturulduktan sonra mevcut kullanıcının eşzamansız olarak getirilmesidir. Bu, kapsayıcı bileşeninin, componentDidMountişlevindeki kodu SitesTable,. Props'larından (kullanıcı) biri değiştiğinde konteyner bileşenini yeniden oluşturmam gerektiğini düşünüyorum. Bunu nasıl doğru bir şekilde yaparım?

class SitesTableContainer extends React.Component {
    static get propTypes() {
      return {
        sites: React.PropTypes.object,
        user: React.PropTypes.object,
        isManager: React.PropTypes.boolean
      }
     }

    componentDidMount() {
      if (this.props.isManager) {
        this.props.dispatch(actions.fetchAllSites())
      } else {
        const currentUserId = this.props.user.get('id')
        this.props.dispatch(actions.fetchUsersSites(currentUserId))
      }  
    }

    render() {
      return <SitesTable sites={this.props.sites}/>
    }
}

function mapStateToProps(state) {
  const user = userUtils.getCurrentUser(state)

  return {
    sites: state.get('sites'),
    user,
    isManager: userUtils.isManager(user)
  }
}

export default connect(mapStateToProps)(SitesTableContainer);

componentDidUpdateYönteminize bir koşul eklemelisiniz .

Örnek, fast-deep-equalnesneleri karşılaştırmak için kullanıyor .

import equal from 'fast-deep-equal'

...

constructor(){
  this.updateUser = this.updateUser.bind(this);
}  

componentDidMount() {
  this.updateUser();
}

componentDidUpdate(prevProps) {
  if(!equal(this.props.user, prevProps.user)) // Check if it's a new user, you can also use some unique property, like the ID  (this.props.user.id !== prevProps.user.id)
  {
    this.updateUser();
  }
} 

updateUser() {
  if (this.props.isManager) {
    this.props.dispatch(actions.fetchAllSites())
  } else {
    const currentUserId = this.props.user.get('id')
    this.props.dispatch(actions.fetchUsersSites(currentUserId))
  }  
}

Kancaları Kullanma (16.8.0+ Tepki)

import React, { useEffect } from 'react';

const SitesTableContainer = ({
  user,
  isManager,
  dispatch,
  sites,
}) => {
  useEffect(() => {
    if(isManager) {
      dispatch(actions.fetchAllSites())
    } else {
      const currentUserId = user.get('id')
      dispatch(actions.fetchUsersSites(currentUserId))
    }
  }, [user]); 

  return (
    return <SitesTable sites={sites}/>
  )

}

Karşılaştırdığınız pervane bir nesne veya diziyse, useDeepCompareEffectbunun yerine kullanmalısınız useEffect.

ComponentWillReceiveProps()hatalar ve tutarsızlıklar nedeniyle gelecekte kullanımdan kaldırılacaktır. Sahne değişikliği bir bileşeni yeniden oluşturma için alternatif bir çözüm kullanmaktır ComponentDidUpdate()ve ShouldComponentUpdate().

ComponentDidUpdate()bileşen her güncellendiğinde VE eğer ShouldComponentUpdate()doğru döndürürse çağrılır ( ShouldComponentUpdate()Tanımlanmamışsa truevarsayılan olarak döner ).

shouldComponentUpdate(nextProps){
    return nextProps.changedProp !== this.state.changedProp;
}

componentDidUpdate(props){
    // Desired operations: ex setting state
}

Aynı davranış, ComponentDidUpdate()içine koşullu ifade dahil edilerek yalnızca yöntem kullanılarak gerçekleştirilebilir .

componentDidUpdate(prevProps){
    if(prevProps.changedProp !== this.props.changedProp){
        this.setState({          
            changedProp: this.props.changedProp
        });
    }
}

Durum koşulsuz veya ShouldComponentUpdate()bileşen tanımlanmadan ayarlanmaya çalışılırsa , bileşen sonsuza kadar yeniden oluşturulacaktır.

Sen kullanabilirsiniz KEYsahne ile değişir benzersiz bir anahtar (veri kombinasyonu) ve bu bileşen güncellenen sahne ile yeniden oluşturulur edilecektir.

componentWillReceiveProps(nextProps) { // your code here}

Sanırım ihtiyacın olan olay bu. componentWillReceivePropsbileşeniniz sahne aracılığıyla bir şey aldığında tetiklenir. Oradan kontrolünüzü alabilir ve yapmak istediğinizi yapabilirsiniz.

Bu cevaba bir göz atmanızı ve yaptığınız şeyle alakalı olup olmadığına bakmanızı tavsiye ederim . Gerçek sorununuzu anlarsam, eşzamansız eyleminizi doğru bir şekilde kullanmamanız ve bileşeninizi yeni donanımlarıyla otomatik olarak güncelleyecek olan redux "store" u güncellemenizdir.

Kodunuzun bu bölümü:

componentDidMount() {
      if (this.props.isManager) {
        this.props.dispatch(actions.fetchAllSites())
      } else {
        const currentUserId = this.props.user.get('id')
        this.props.dispatch(actions.fetchUsersSites(currentUserId))
      }  
    }

Bir bileşende tetikleyici olmamalı, ilk isteğinizi yerine getirdikten sonra ele alınmalıdır.

Redux-thunk'tan bu örneğe bir göz atın :

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

Redux-thunk kullanmanız gerekmez, ancak bunun gibi senaryolar hakkında mantık yürütmenize ve buna uygun kod yazmanıza yardımcı olur.

Kullanılması kolay bir yöntem şudur, pervane güncellemeleri bir kez bileşeni otomatik olarak yeniden işleyecektir:

render {

let textWhenComponentUpdate = this.props.text 

return (
<View>
  <Text>{textWhenComponentUpdate}</Text>
</View>
)

}