React: इसके लिए चेतावनी: PropTypes.object.isआवश्यक है जब प्रोप `null` हो

null बिना किसी मूल्य के बराबर है और यह कोई वस्तु नहीं है (खाली या अन्यथा)। यदि आप इसे null लिए चेतावनी नहीं देना चाहते हैं तो इसे आवश्यक न बनाएं, इसका प्रभाव समान है। एक कुंजी की उपस्थिति के लिए परीक्षण कुछ ऐसा नहीं है जिसकी मैं अनुशंसा करता हूं।

मैं सहमत हूँ। मैं बहुत से उपयोग मामलों के बारे में नहीं सोच सकता जहां आप किसी उपयोगकर्ता को मान निर्दिष्ट करने के लिए मजबूर करना चाहते हैं, लेकिन मान्य मान के रूप में शून्य को स्वीकार करने के इच्छुक होंगे। व्यावहारिक उद्देश्यों के लिए, शून्य के लिए आवश्यक चेतावनी समझदार और अपेक्षित व्यवहार है।

संबंधित: https://github.com/facebook/react/issues/2166
(यह समस्या अभी भी खोज परिणामों में प्रमुखता से दिखाई देती है)

डेटा के लिए एपीआई कॉल समाप्त होने से पहले एक सामान्य उपयोग का मामला जो मुझे दिखाई देता है, वह है रिएक्ट एक घटक को प्रस्तुत करना। पहला रेंडर प्रस्तुत करेगा, उदाहरण के लिए, वस्तुओं की एक सूची ( items: null )। फिर एपीआई कॉल समाप्त होता है, और अब items एक सरणी के साथ भर जाता है।

मैं PropTypes.oneOfType([null, PropTypes.object]).isRequired करने की कोशिश कर रहा हूं, इसलिए या तो शून्य या एक वस्तु, क्या यह अभी संभव नहीं है?

CHANGELOG के अनुसार, 15.4.0 यह संभव होने का अनुमान है

वास्तव में, यह 15.4.0 में इसके विपरीत है: Required PropTypes now fail with specific messages for null and undefined.

मैं भी इस मुद्दे का सामना कर रहा हूं।
@Noitidart का समाधान मेरे लिए काम नहीं कर रहा है। यह कहते हुए एक त्रुटि फेंकता है:
Failed prop type: The prop मान is marked as required in चुनें , but its value is शून्य .

मुझे संपत्ति की आवश्यकता के लिए वास्तव में उपयोगी लगता है लेकिन शून्य मानों को भी अनुमति देता है।

+1 किसी भी तरह null अनुमति देने के लिए।

हमारे पास एक उपयोग का मामला है जहां हमारा कॉन्फ़िगरेशन JSON के माध्यम से लोड किया गया है, और कई लेबल कॉन्फ़िगरेशन विकल्प हैं जो एक स्ट्रिंग निर्दिष्ट करते हैं जिसे प्रदर्शित किया जाना चाहिए, कुछ इस तरह:

{
  "title": "my title"
}

इसलिए जब कोई शीर्षक प्रदर्शित नहीं किया जाना चाहिए, तो हम उस मामले को दर्शाने के लिए null का उपयोग करते हैं:

{
  "title": null
}

(समानांतर hasTitle: false जोड़ना निषेधात्मक होगा क्योंकि हमारे पास इनमें से दर्जनों सेटिंग्स हैं।)

JSON सामग्री के लिए, अशक्त ( undefined ) बनाम जानबूझकर छोड़े गए ( null ) के बीच अंतर करने के लिए नल का उपयोग करना एक बहुत ही उपयोगी तरीका है।

आप शून्य की अनुमति दे सकते हैं, प्रोपटाइप को आवश्यक नहीं होने के लिए सेट करें, क्योंकि इसकी आवश्यकता नहीं है: पी

@jquense धन्यवाद यह बहुत मददगार है! मैंने अपनी पिछली टिप्पणी हटा दी थी क्योंकि इस SO उत्तर ने वही बात कही थी।

@jquense आप अशक्त और अपरिभाषित की अनुमति दे सकते हैं, लेकिन एक या दूसरे को नहीं।

यही है सारी समस्या! जावास्क्रिप्ट ने इन 2 अलग-अलग निर्माणों को एक कारण के लिए प्रदान किया है, इसलिए सभी को प्रोपटाइप के लिए null === undefined का इलाज करने के लिए मजबूर करना एक कृत्रिम सीमा है।

सिर्फ इसलिए कि मैं एक प्रोपटाइप को स्पष्ट रूप से शून्य की अनुमति देना चाहता हूं इसका मतलब यह नहीं है कि मुझे अपरिभाषित को भी अनुमति देनी चाहिए। वे दो अलग-अलग मामले हैं, और भाषा ने उन्हें इस तरह से उद्देश्य से डिजाइन किया है।

मेरे पास इस निरीक्षण के आसपास काम करने के लिए एक पीआर है: https://github.com/facebook/prop-types/pull/90

मैं undefined को अस्वीकार करना चाहता हूं क्योंकि इसका मतलब है कि एक टाइपो है और null अनुमति दें क्योंकि इसका मतलब है कि कॉलर स्पष्ट रूप से null में पारित हो गया है। यही इस मुद्दे की बात है। मैं समझता हूं कि यह मुद्दा बंद हो गया है क्योंकि इसे केवल प्रवाह पर स्विच करने की अनुशंसा की जाती है, जिसे मैं देखूंगा।

@binki null अनुमति देने का एक तरीका है लेकिन undefined , अपने स्वयं के प्रोपटाइप सत्यापनकर्ता फ़ंक्शन का उपयोग करना है।

नीचे दिए गए उदाहरण में, केवल null या string की अनुमति है। PropTypes लाइब्रेरी स्ट्रिंग्स की जांच के लिए आंतरिक रूप से typeof का उपयोग करती है, इसलिए मैंने वही किया। एक लाभ यह है कि आप इस फ़ंक्शन को अपने घटक के बाहर ले जा सकते हैं और इसे आवश्यकतानुसार कॉल कर सकते हैं।

static propTypes = {
  id: PropTypes.number.isRequired,
  email: function(props, propName, componentName) {
    const propValue = props[propName] // the actual value of `email` prop
    if (propValue === null) return
    if (typeof propValue === 'string') return
    return new Error(`${componentName} only accepts null or string`)
  }
}

मुझे लगता है कि यह समाधान PropTypes लाइब्रेरी के इरादे से भटक गया है - मेरे कहने का कारण यह है कि https://github.com/facebook/prop-types/blob/master/factoryWithTypeCheckers.js पर प्रोपटाइप लाइब्रेरी से नीचे दिए गए कोड के कारण है।

वास्तव में मान्य होने से पहले, एक त्वरित जांच की जाती है जिसमें isRequired के साथ सेट किए गए गुण स्वचालित रूप से एक त्रुटि फेंक देते हैं यदि संपत्ति का मूल्य null । दूसरे शब्दों में, उनका मानना ​​​​है कि एक आवश्यक संपत्ति का शून्य होना गलत है, जबकि मैं इसे एक वैध उपयोग के मामले में आवश्यक नल के लिए मानता हूं।

if (props[propName] == null) {
  if (isRequired) {
    if (props[propName] === null) {
      return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
    }
    return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
  }
  return null;
} else {
  return validate(props, propName, componentName, location, propFullName);
}

मैं बताए गए कारणों के लिए @ jharris4 से सहमत हूं। null undefined के समान नहीं है। इसे प्लेसहोल्डर के रूप में उपयोग करना मानक है।

मोज़िला डेवलपर नेटवर्क से:

मूल्य शून्य किसी वस्तु मूल्य की जानबूझकर अनुपस्थिति का प्रतिनिधित्व करता है।

शून्य वैश्विक वस्तु की संपत्ति के लिए पहचानकर्ता नहीं है, जैसे अपरिभाषित हो सकता है। इसके बजाय, अशक्त पहचान की कमी को व्यक्त करता है, यह दर्शाता है कि एक चर किसी वस्तु की ओर इशारा नहीं करता है। एपीआई में, नल को अक्सर उस स्थान पर पुनर्प्राप्त किया जाता है जहां किसी वस्तु की अपेक्षा की जा सकती है लेकिन कोई वस्तु प्रासंगिक नहीं है।

शून्य को कम से कम PropTypes.oneOfType([null, PropTypes.string]).isRequired माध्यम से अनुमति दी जानी चाहिए।

@jquense - isRequired हटाने का मतलब है कि आपको शायद डिफ़ॉल्ट सेट करना चाहिए। क्या इसका मतलब यह है कि अब आप रेड्यूसर में घटक _and_ में प्रारंभिक मान के लिए एक डिफ़ॉल्ट सेट कर रहे होंगे, सभी को null को एक प्रोप के मूल्य के रूप में अनुमति देने से बचने के लिए?

मेरे पास data || '' ( isRequired खाली स्ट्रिंग स्वीकार करता है '' , खाली वस्तु {} , आदि) का एक गुच्छा है। समाप्त null घटक को बताने के लिए एकदम सही बात है कि डेटा आ रहा है बस थोड़ा इंतजार करें! (लेकिन मैं ऐसा नहीं कर सकता...)
@ puiu91 अब के लिए चारों ओर एक अच्छा काम किया है ... मैं हमारे codebase भर में उपयोग करने के लिए एक उपयोगिता कार्य करना होगा ... के बाद से यह इस मुद्दे की तरह किसी भी समय फिर से खोला नहीं जा रहा है जल्द ही विलाप लग रहा है

मैं यह भी मानता हूं कि null को मूल्य के रूप में स्वीकार करने का एक मानक तरीका होना चाहिए, उन्हीं कारणों से @ jharris4 और @Findiglay ने कहा, लेकिन यह अब चर्चा जारी रखने का स्थान नहीं है। न केवल इस मुद्दे को बंद कर दिया गया है, बल्कि यह facebook/prop-types से संबंधित है । मैं यहाँ facebook/prop-types#90 पुल अनुरोध का पालन कर रहा हूँ।

टक्कर। आज भी इसमें चल रहा है। कुछ इस तरह के लिए अंतर्निहित समर्थन करना बहुत अच्छा होगा:

myObj: PropType.object.isRequiredOrNull :)

मुझे लगता है कि इस पर प्राथमिकता बहुत कम है। फ्लो जाने का अनुशंसित तरीका है। http://flow.org/

@ मरुजाह आपका स्निपेट सही नहीं है।

घटक को शून्य पास करने का प्रयास करें, और आप देखेंगे कि आपको चेतावनी मिल जाएगी:

Warning: Failed prop type: The prop 'theProp' is marked as required in 'TheComponent', but its value is null.

समस्या यह है कि आवश्यक का मूल्यांकन पहले किया जाता है और यह कभी भी शून्य या अपरिभाषित मानों को नहीं जाने देगा।

यदि आप रुचि रखते हैं तो समस्या को ठीक करने के लिए पीआर टू प्रॉप-टाइप ऊपर लिंक किया गया है।

ओह वास्तव में! फिर से परीक्षण किया तुम सही हो

यह आवश्यक है कि एक मूल्य या शून्य विशेष रूप से प्रदान किया जाना चाहिए, पूरी तरह से PropTypes के माध्यम से अनुमति दी जानी चाहिए।

यहां उपयोग का मामला है जिसमें मैं चल रहा हूं। हमारे पास कुछ कॉलबैक हैं जो हमारे चयनकर्ताओं के 90% के लिए आवश्यक हैं। जिन लोगों को उनकी आवश्यकता नहीं है वे बहुत विशिष्ट उपयोग के मामले हैं। हमारे पास कुछ नए डेवलपर हैं जो सभी सामान्य कॉलबैक प्रदान करना लगातार भूल रहे हैं।

मैं इन घटकों के सभी उपयोगों को विशिष्ट कॉलबैक शामिल नहीं करने के लिए सचेत निर्णय लेने के लिए मजबूर करना चाहता हूं, बजाय इसके कि कोई व्यक्ति कुछ प्रॉप्स को भूल जाए।

हां, हम प्रवाह के माध्यम से अपने स्वयं के अधिक विशिष्ट चेक में हैक कर सकते हैं, लेकिन यह हमारे प्रोप सत्यापन को दो स्थानों में विभाजित करता है, और किसी के लिए प्रोपटाइप परिभाषाओं पर नज़र रखने के लिए अनजान है।

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

मैं एक लोडर घटक ( PropTypes.node ) को props पास कर रहा हूं, और जब मैं लोडर प्रस्तुत नहीं करना चाहता तो मैं null पास करता हूं।
Afaik, एक render फ़ंक्शन को null बजाय undefined वापस करना चाहिए जब कुछ भी प्रस्तुत नहीं करना चाहिए। इसलिए null क्योंकि मान मेरे लिए इसे करने का सही तरीका है।

मैं InputNumber घटक को लागू किया गया था (के लिए आवरण <input type="number"> ), तो मैं था propTypes मेरी प्रोप के लिए value - PropTypes.number.isRequired , और जब मैं अपने घटक, मैं प्रयोग किया जाता है हमेशा इसे संपत्ति पारित किया। लेकिन आज मुझे मूल्य के लिए डिफ़ॉल्ट लिंक द्वारा एक निरर्थक पास करने की आवश्यकता है, और मेरा घटक एक चेतावनी जोड़ता है। एकमात्र निर्णय जिसकी मैं कल्पना कर सकता था, वह है propTypes को मेरे प्रोप value से PropTypes.oneOfType([PropTypes.number, PropTypes.string]) बदलना और defaultProps को शून्य के रूप में सेट करना है। लेकिन मुझे लगता है कि यह सही नहीं है क्योंकि इनपुट प्रकार = संख्या केवल संख्याओं के साथ काम करना चाहिए।

मैं PropTypes.oneOfType([null, PropTypes.object]).isRequired करने की कोशिश कर रहा हूं, इसलिए या तो शून्य या एक वस्तु, क्या यह अभी संभव नहीं है?

यह एक समारोह की अपेक्षा करता है: Warning: Invalid argument supplied to oneOfType. Expected an array of check functions, but received null at index 1.

तो, आपको एक फ़ंक्शन की आपूर्ति करनी चाहिए, जैसे:

PropTypes.oneOfType([
  () => null,
  PropTypes.object
]).isRequired

इस बग का सामना करने के बाद, मैंने इसके आसपास काम करने के लिए एक सुविधा फ़ंक्शन लिखा है:

function nullable(subRequirement) {
  const check = (required, props, key, ...rest) => {
    if (props[key] === null) {
      return null;
    }
    const sub = required ? subRequirement.isRequired : subRequirement;
    return sub(props, key, ...rest);
  };
  const fn = check.bind(null, false);
  fn.isRequired = check.bind(null, true);
  return fn;
}

उपयोग:

static propTypes = {
  someCallbackFunction: nullable(PropTypes.func).isRequired,
};

nullable बिना isRequired का उपयोग करना संभव (बल्कि व्यर्थ) है। मेरे द्वारा इसे isRequired के साथ संगत बनाने का कारण यह है कि यह react/require-default-props एस्लिंट नियम के साथ काम करेगा।

मेरा उपयोग-मामला एक सामान्य एपीआई के अनुरूप घटकों की एक श्रृंखला है, जो एक घटक द्वारा लपेटा जाता है जो कॉलबैक को संभालता है। null कॉलबैक का अर्थ है 'केवल पढ़ने के लिए', इसलिए रैपर घटक कभी-कभी जानबूझकर null s पास करता है। साथ ही, यह सुनिश्चित करने के लिए कि यदि कोई नई संपत्ति जोड़ी जाती है, तो यह छूट नहीं जाती है, यह सुनिश्चित करने के लिए प्रत्येक संपत्ति उप-घटकों को पारित कर दी जाती है। मैं इस एपीआई के अनुरूप प्रत्येक घटक के लिए defaultProps शून्य भी प्रदान नहीं करना चाहता; जहां तक ​​​​वे जानते हैं, कॉलर ने एक मान निर्दिष्ट किया होगा।

मैंने पहले लिखे गए सहायक को लिया और शुद्धता साबित करने के लिए परीक्षणों के एक समूह के साथ इसे एक पैकेज में डाल दिया:

npm install --save git+https://github.com/davidje13/prop-types-nullable.git#semver:^1.0.0

उपयोग:

import PropTypes from 'prop-types';
import nullable from 'prop-types-nullable';

[...]

static propTypes = {
  thing: nullable(PropTypes.string).isRequired,
};

नया समाधान: PropTypes.oneOfType([PropTypes.object]).isRequired

मुझे त्रुटि हो रही है।
कैसे ठीक करें।

./~/prop-types/prop-types.js में चेतावनी महत्वपूर्ण निर्भरताएँ: 1:482-489 यह एक पूर्व-निर्मित जावास्क्रिप्ट फ़ाइल प्रतीत होती है। हालांकि यह संभव है, यह अनुशंसित नहीं है। बेहतर परिणाम प्राप्त करने के लिए मूल स्रोत की आवश्यकता का प्रयास करें। @ ./~/prop-types/prop-types.js 1:482-489

मैं PropTypes.oneOfType([null, PropTypes.object]).isRequired करने की कोशिश कर रहा हूं, इसलिए या तो शून्य या एक वस्तु, क्या यह अभी संभव नहीं है?

यह एक समारोह की अपेक्षा करता है: Warning: Invalid argument supplied to oneOfType. Expected an array of check functions, but received null at index 1.

तो, आपको एक फ़ंक्शन की आपूर्ति करनी चाहिए, जैसे:

PropTypes.oneOfType([
  () => null,
  PropTypes.object
]).isRequired

असल में मुझे अंत में 'आवश्यक' की वजह से एक त्रुटि हुई थी, एक ही समय में शून्य और आवश्यक होने के कारण संगत नहीं है ...
इसी से मेरा काम बना है:

PropTypes.oneOfType([ 
    PropTypes.string.isRequired, 
    () => null 
])

@ gugol2 कृपया ध्यान दें कि आपने जो लिखा है वह पूरी तरह से टाइप चेकिंग को अक्षम कर देगा (अब आप उस प्रोप, या undefined , या कुछ भी करने के लिए एक नंबर पास कर सकते हैं); सत्यापन सफल होने पर आपके द्वारा प्रदान किया जाने वाला फ़ंक्शन null वापस आना चाहिए और यदि यह विफल रहता है तो गैर- null ।

यदि आप उस मार्ग पर जाना चाहते हैं तो आपको कुछ और चाहिए:

PropTypes.oneOfType([
  PropTypes.string.isRequired,
  (props, key) => props[key] === null ? null : 'Not null'
])

बेशक आप खराब दिखने वाले सहायक कार्य को पूर्व-परिभाषित कर सकते हैं:

const nullable = (props, key) => props[key] === null ? null : 'Not null'

// ...

PropTypes.oneOfType([PropTypes.string.isRequired, nullable])

यह केवल PropTypes.oneOfType([PropTypes.string.isRequired]) उपयोग करने के लिए विचित्र रूप से संभव है (लेकिन मैं वास्तव में इसकी अनुशंसा नहीं करता!) हालांकि यह एक बग की तरह लगता है और मैं इस तरह के कोड को बाद के संस्करणों में जीवित रहने की उम्मीद नहीं करता। यह भी ध्यान दें कि यह पहले से सुझाई गई विधि के समान है, लेकिन समान नहीं है जो काम नहीं करती है।

यदि आप प्रतीक्षा कर सकते हैं, तो एक खुला पीआर है जो अविश्वसनीय रूप से धीरे-धीरे आगे बढ़ रहा है लेकिन जाहिर तौर पर अभी भी विचार में है।

और जब तक पीआर का विलय नहीं हो जाता, मैं अपने द्वारा बनाए गए पीछे का .isRequired डालना होगा, जो इसे लाइनिंग नियमों के अनुकूल बनाता है।

आईएमएचओ यह सही व्यवहार है लेकिन इसे दस्तावेज किया जाना चाहिए।

डेटा के लिए एपीआई कॉल समाप्त होने से पहले एक सामान्य उपयोग का मामला जो मुझे दिखाई देता है, वह है रिएक्ट एक घटक को प्रस्तुत करना। पहला रेंडर प्रस्तुत करेगा, उदाहरण के लिए, वस्तुओं की एक सूची ( items: null )। फिर एपीआई कॉल समाप्त होता है, और अब items एक सरणी के साथ भर जाता है।

इसे संभालने का कोई सबसे अच्छा तरीका? मैं चाहता हूं कि यह प्रोप आवश्यक हो लेकिन एपीआई से वापस आने से पहले यह शून्य है।

PropTypes.oneOfType([
  PropTypes.string.isRequired,
  (props, key) => props[key] === null ? null : 'Not null'
])

@ davidje13 मुझे इस दृष्टिकोण के साथ एक छोटी सी समस्या का सामना करना पड़ता है। कवरेज परीक्षण में 1/4 मामला है जिसे कभी कवर नहीं किया जाता है।

मान लें कि मेरे पास एक घटक लॉगिन है जिसमें केवल एक प्रोप 'नाम' है जो शून्य या आवश्यक स्ट्रिंग हो सकता है:

const Login = ({name}) => {
  return <div>{name}</div>
} 

तो इसके प्रॉपटाइप हैं:

Login.propTypes = {
  name: PropTypes.oneOfType([
    PropTypes.string.isRequired,
    (props, key) => (props[key] === null ? null : 'Not null'),
  ]),
};

जब मैं इस घटक का परीक्षण करता हूं तो मेरे पास वास्तव में केवल 2 परिदृश्य होते हैं, शून्य या एक आवश्यक स्ट्रिंग।

render(<Login name={null} />
render(<Login name={'anyName'} />

लेकिन कवरेज मुझे बताता है कि मेरे परीक्षण में केवल 75% कवरेज है।
मुझे आश्चर्य है कि इसके लिए आधिकारिक दृष्टिकोण क्या होगा।

ऐसा लगता है कि आपका लापता परीक्षण मामला वह है जहां यह प्रोप जांच में विफल रहता है? यानी यदि आप कोई संख्या या अपरिभाषित या कुछ और पास करते हैं जो उसके पास नहीं होना चाहिए।

ऐसा लगता है कि आपका लापता परीक्षण मामला वह है जहां यह प्रोप जांच में विफल रहता है? यानी यदि आप कोई संख्या या अपरिभाषित या कुछ और पास करते हैं जो उसके पास नहीं होना चाहिए।

नहीं, ऐसा नहीं है।

अपरिभाषित पास करना कवरेज का विस्तार नहीं करता है।
और मैं वैसे भी एक नंबर पास नहीं कर सकता, यह एक अनुमत मान नहीं है।

मैं उस मामले को कवर करने में सक्षम नहीं हूं।