ComponentsWillReceiveProps का नाम बदला गया है

10

मैं सामग्री यूआई SwipeableViews का उपयोग कर रहा हूं जो कि ReactSwipableView पैकेज का उपयोग करता है, मुझे कंसोल पर यह त्रुटि मिल रही है

प्रतिक्रिया-dom.development.js: 12466 चेतावनी: ComponentsWillReceiveProps का नाम बदल दिया गया है, और उपयोग के लिए अनुशंसित नहीं है। विवरण के लिए देखें।

घटक के लिए डेटा लाने के कोड या साइड इफेक्ट्स को स्थानांतरित करें।

यदि आप जब भी प्रॉप्स बदलते हैं तो राज्य को अपडेट कर रहे होते हैं, तो अपने कोड को मेमोलाइजेशन तकनीकों का उपयोग करने के लिए रिफैक्टर करें या इसे स्थिर getDerivedStateFromProps में स्थानांतरित करें। और जानें:

गैर-सख्त मोड में इस चेतावनी को दबाने के लिए, UNSAFE_componentWillReceiveProps को घटकWillReceiveProps का नाम बदलें। रिएक्ट 17.x में, केवल UNSAFE_ नाम काम करेगा। सभी नए जीवन चक्रों को उनके नए नामों में बदलने के लिए, आप npx react-codemod rename-unsafe-lifecyclesअपने प्रोजेक्ट स्रोत फ़ोल्डर में चला सकते हैं ।

कृपया निम्नलिखित घटकों को अद्यतन करें: ReactSwipableView

वहाँ इस त्रुटि से छुटकारा पाने के लिए कोई रास्ता नहीं है मैंने UNSAFE_componentWillReceiveProps की कोशिश की, लेकिन कुछ भी नहीं बदला

reactjs

— बुक लाऊ
स्रोत

1

क्या आप अपने घटक componentWillReceivePropsमें उपयोग कर रहे हैं , या यह आपके पैकेज से आ रहा है?

— मार्टिन

1

इसकी प्रतिक्रिया से स्वाइप करने योग्य दृश्य पैकेज आते हैं

— बुक लाऊ

8

ऐसा लगता है कि यह पहले से ही रखवाले को सूचित किया गया है।

अब, एक खुले स्रोत सॉफ़्टवेयर के उपभोक्ता के रूप में, आप:

समस्या को ठीक करने (या ठीक न करने) की प्रतीक्षा करें
शांत रहो और उनके लिए इसे ठीक करने के लिए एक पीआर सबमिट करें :) यहां componentWillReceivePropsरेपो में सभी संदर्भ हैं
उपयोग करने के लिए एक नया पैकेज खोजें

अंततः, यह आपके सॉफ़्टवेयर से संबंधित कोई त्रुटि नहीं है, लेकिन यह जिस निर्भरता पर निर्भर करता है। यह वास्तव में उन को ठीक करने के लिए आपकी जिम्मेदारी नहीं है। यदि आपका ऐप चलता है, तो यह ठीक रहेगा। से चेतावनी react-dom.development.jsउत्पादन में प्रकट नहीं होगी।

— मार्टिन
स्रोत

2

के getDerivedStateFromPropsबजाय का उपयोग करेंcomponentWillReceiveProps

उदाहरण के लिए:

इससे पहले:

// Before
class ExampleComponent extends React.Component {
  state = {
    isScrollingDown: false,
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.currentRow !== nextProps.currentRow) {
      this.setState({
        isScrollingDown:
          nextProps.currentRow > this.props.currentRow,
      });
    }
  }
}

उपरांत:

// After
class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {
    isScrollingDown: false,
    lastRow: null,
  };

  static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

— Bashirpour
स्रोत

1

मेरे पास यह पता लगाने में समस्या थी कि मेरे कोड कंपोनेंट में कौन-सा री-पेवर्स कहा जा रहा है। मैंने चेतावनी में ध्यान दिया कि इसमें एक विशेष घटक, "दराज" का उल्लेख किया गया था, जो कि हमारे द्वारा उपयोग किए जा रहे एंटी-डी लिब का हिस्सा था। एंटी-डी को नवीनतम संस्करण में अपग्रेड करने के बाद, चेतावनी चली गई।

— क्रिस एडम्स
स्रोत

1

यह मूल प्रोजेक्ट में एक सामान्य त्रुटि है। यदि इसे निम्नलिखित चरणों द्वारा हल किया जा सकता है:

पहले अपनी प्रतिक्रिया मूल परियोजना निर्देशिका में दर्ज करें,

npm i --save lodash

-इसके बाद अपनी .js फ़ाइल में निम्न कोड लिखें:

    import { YellowBox } from 'react-native';
    import _ from 'lodash';

    YellowBox.ignoreWarnings(['componentWillReceiveProps']);
    const _console = _.clone(console);
    console.warn = message => {
    if (message.indexOf('componentWillReceiveProps') <= -1) {
     _console.warn(message);
    } 
   };

— सूरज श्रेष्ठ
स्रोत