जब परिवर्तन बदलता है तो रिएक्ट घटक को फिर से प्रस्तुत करें

Question 1

मैं एक कंटेनर घटक से एक प्रस्तुति घटक को अलग करने की कोशिश कर रहा हूं। मेरे पास एक SitesTableऔर एक है SitesTableContainer। वर्तमान उपयोगकर्ता के आधार पर उपयुक्त साइटों को लाने के लिए कंटेनर Redux क्रियाओं को चालू करने के लिए जिम्मेदार है।

समस्या यह है कि वर्तमान उपयोगकर्ता को अतुल्यकालिक रूप से प्राप्त किया जाता है, क्योंकि कंटेनर घटक शुरू में प्रदान किया जाता है। इसका मतलब यह है कि कंटेनर घटक को नहीं पता है कि उसे अपने componentDidMountफ़ंक्शन में कोड को फिर से निष्पादित करने की आवश्यकता है जो डेटा को भेजने के लिए अद्यतन करेगा SitesTable। मुझे लगता है कि जब मेरे प्रॉपर (उपयोगकर्ता) में से एक में बदलाव होता है तो मुझे कंटेनर घटक को फिर से प्रस्तुत करना होगा। मैं इसे सही तरीके से कैसे करूं?

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

Question 2

आपको अपने componentDidUpdateतरीके में एक शर्त जोड़नी होगी ।

fast-deep-equalवस्तुओं की तुलना करने के लिए उदाहरण का उपयोग किया जाता है।

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

हुक का उपयोग करना (प्रतिक्रिया 16.8.0+)

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

}

यदि आप जिस प्रोप की तुलना कर रहे हैं, वह एक ऑब्जेक्ट या एरे है, तो आपको useDeepCompareEffectइसके बजाय उपयोग करना चाहिए useEffect।

Question 3

ComponentWillReceiveProps()भविष्य में बग्स और विसंगतियों के कारण अपदस्थ होने जा रहा है। सहारा परिवर्तन पर एक घटक को फिर से प्रस्तुत करने के लिए एक वैकल्पिक समाधान का उपयोग करना है ComponentDidUpdate()और ShouldComponentUpdate()।

ComponentDidUpdate()जब भी घटक अद्यतनों को कहा जाता है और यदि ShouldComponentUpdate()सही है (यदि ShouldComponentUpdate()यह परिभाषित नहीं है तो यह trueडिफ़ॉल्ट रूप से लौटता है) कहा जाता है।

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

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

यह समान व्यवहार केवल ComponentDidUpdate()विधि का उपयोग करके पूरा किया जा सकता है इसके अंदर सशर्त विवरण शामिल करके।

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

यदि कोई सशर्त या ShouldComponentUpdate()घटक को परिभाषित किए बिना राज्य को निर्धारित करने का प्रयास करता है , तो वह असीम रूप से पुन: रेंडर कर देगा

Question 4

आप KEYअद्वितीय कुंजी (डेटा का संयोजन) का उपयोग कर सकते हैं जो प्रॉप्स के साथ बदलता है, और उस घटक को अद्यतन प्रॉपर के साथ रेंडर किया जाएगा।

Question 5

componentWillReceiveProps(nextProps) { // your code here}

मुझे लगता है कि वह घटना है जिसकी आपको आवश्यकता है। componentWillReceivePropsजब भी आपका घटक प्रॉपर के माध्यम से कुछ प्राप्त करता है, तो ट्रिगर होता है। वहां से आप अपनी चेकिंग कर सकते हैं फिर आप जो करना चाहते हैं वह करें।

Question 6

मैं आपके इस उत्तर पर एक नज़र डालने की सलाह दूंगा , और यह देखूंगा कि क्या यह प्रासंगिक है जो आप कर रहे हैं। अगर मुझे आपकी वास्तविक समस्या समझ में आती है, तो यह है कि आपकी बस अपने async कार्रवाई का सही ढंग से उपयोग नहीं कर रहा है और redux "store" को अपडेट कर रहा है, जो कि आपके घटक को नए प्रॉप्स के साथ अपडेट कर देगा।

आपके कोड का यह भाग:

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

एक घटक में ट्रिगर नहीं होना चाहिए, इसे आपके पहले अनुरोध को निष्पादित करने के बाद नियंत्रित किया जाना चाहिए।

Redux-thunk से इस उदाहरण को देखें :

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 का उपयोग करें, लेकिन यह आपको इस तरह के परिदृश्यों के बारे में कारण और मैच लिखने के लिए कोड लिखने में मदद करेगा।

Question 7

उपयोग करने के लिए एक अनुकूल विधि निम्नलिखित है, एक बार प्रोप अपडेट यह स्वचालित रूप से रेंडरर घटक होगा:

render {

let textWhenComponentUpdate = this.props.text 

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

}