React: 警告：propが `null`の場合はPropTypes.object.isRequired

nullは値なしと同等であり、オブジェクトではありません（空またはその他）。 null警告を表示したくない場合は、必須にしないでください。同じ効果があります。 キーの存在をテストすることは、私がお勧めするものではありません。

同意します。 ユーザーに値を指定するように強制したいが、有効な値としてnullを受け入れても構わないと思っている、非常に多くのユースケースは考えられません。 実用的な目的では、nullのisRequired警告は賢明であり、予想される動作です。

関連： https ：
（この問題は依然として検索結果に目立つように表示されます）

私が目にする一般的なユースケースは、データのAPI呼び出しが終了する前にReactがコンポーネントをレンダリングすることです。 最初のレンダリングは、たとえば、アイテムのリスト（ items: null ）をレンダリングします。 その後、API呼び出しが終了し、 items配列が入力されます。

PropTypes.oneOfType([null, PropTypes.object]).isRequiredを実行しようとしているので、nullまたはオブジェクトのいずれかですが、これは現在不可能ですか？

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 null .

プロパティを要求するだけでなく、null値を許可することは非常に便利です。

どういうわけかnullを許可するための+1。

構成がJSONを介してロードされるユースケースがあり、表示する文字列を指定するいくつかのラベル構成オプションがあります。たとえば、次のようになります。

{
  "title": "my title"
}

したがって、タイトルを表示しない場合は、 nullを使用してそのケースを示します。

{
  "title": null
}

（これらの設定が数十あるため、並列のhasTitle: falseを追加することは禁止されます。）

JSONコンテンツの場合、nullを使用することは、定義されていない（ undefined ）と意図的に省略されている（ null ）を区別するための非常に便利な方法です。

nullを許可し、propTypeを不要に設定することができます。これは必須ではないためです：P

@jquenseありがとう回答が同じことを言っていたので、以前のコメントを削除しました。

@jquenseは、nullと未定義を許可できますが、

それが全体の問題です！ Javascriptは、これら2つの異なる構造を理由で提供したため、PropTypesに対してnull === undefinedを処理するように全員に強制することは、人為的な制限です。

PropTypeで明示的にnullを許可したいからといって、undefinedも許可する必要があるという意味ではありません。 それらは2つの異なるケースであり、言語は意図的にそのように設計しました。

私はここでこの見落としを回避するためのPRを持っています： https ：

undefinedを許可しないのは、タイプミスがあることを意味し、 nullを許可するのは、呼び出し元が明示的にnull渡したためです。 それがこの問題のポイントです。 フローに切り替えることをお勧めしますので、この問題は解決されたと理解しています。これについては後で説明します。

できるようにする一つの方法を@binki nullではなくundefined独自のPropTypeバリデータ機能を使用することです。

以下の例では、 nullまたはstringが許可されています。 PropTypesライブラリは内部でtypeofを使用して文字列をチェックするので、同じことを行いました。 1つの利点は、この関数をコンポーネントの外部に移動して、必要に応じて呼び出すことができることです。

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にあるPropTypesライブラリの以下のコードによるものです

実際に検証する前に、プロパティ値がnull場合、isRequiredで設定されたプロパティが自動的にエラーをスローするクイックチェックが実行されます。 言い換えれば、必要なプロパティがnullであるのは誤りであると彼らは信じていますが、私はそれが必要な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と同じではありません。 プレースホルダーとして使用するのが標準です。

Mozilla Developer Networkから：

値nullは、オブジェクト値が意図的に存在しないことを表します。

nullは、undefinedのように、グローバルオブジェクトのプロパティの識別子ではありません。 代わりに、nullは識別の欠如を表し、変数がオブジェクトを指していないことを示します。 APIでは、オブジェクトが期待できる場所でnullが取得されることがよくありますが、関連するオブジェクトはありません。

少なくともPropTypes.oneOfType([null, PropTypes.string]).isRequiredまではnullを許可する必要があります。

@jquense — isRequired削除すると、おそらくデフォルトを設定する必要があります。 これは、プロップの値としてnullを許可しないようにするために、レデューサーのコンポーネント_および_の初期値のデフォルトを設定することを意味しますか？

API呼び出しを待っている間にセレクターにdata || '' （ isRequiredは空の文字列'' 、空のオブジェクト{}などを受け入れる）がたくさんあります終了nullは、データが来ることをコンポーネントに伝えるのに最適です。少し待ってください。 （しかし、私はそれを行うことはできません...）
@ puiu91は今のところ良いため息をつきます

@ jharris4と@Findiglayが述べたのと同じ理由で、値としてnullを受け入れる標準的な方法があるはずだということにも同意しますが、これはもう議論を続ける場所ではありません。 この問題は解決されただけでなく、 facebook / prop-typesに属してい

バンプ。 今日もこれに遭遇しています。 次のようなサポートが組み込まれていると便利です。

myObj：PropType.object.isRequiredOrNull :)

これの優先順位は非常に低いと思います。 フローは、推奨される方法です。 http://flow.org/

@Marujahあなたのスニペットは正しくありません。

コンポーネントにnullを渡してみると、警告が表示されます。

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

問題は、isRequiredが最初に評価され、nullまたは未定義の値を通過させないことです。

興味があれば、問題を修正するためのprop-typesへのPRは上にリンクされています。

ああ、確かに！ もう一度再テストしましたね

値またはnullを具体的に指定する必要があることを要求することは、PropTypesを介して絶対に許可する必要があります。

これが私が遭遇しているユースケースです。 セレクターの90％が必要とするコールバックがいくつかあります。 それらを必要としないいくつかは、非常に特殊なユースケースです。 通常のコールバックをすべて提供することを常に忘れている新しい開発者がいます。

誰かがいくつかの小道具を忘れるのではなく、これらのコンポーネントのすべての使用を強制して、特定のコールバックを含めないという意識的な決定を下したいと思います。

はい、フローを介して独自のより具体的なチェックをハックすることはできますが、それは小道具の検証を2つの場所に分割し、propTypesの定義を一瞥する人にとっては直感的ではありません。

ここに私のユースケースを追加したかっただけです。 データがフェッチされた日時、エラーが発生した場合などのデータを含むreduxストアがあります。コンポーネントには「error」propが必要です（データをフェッチできなかった場合にユーザーにエラーを表示できるようにするため）。これは、データが正常にロードされた場合はnullですが、エラーが発生した場合は入力されます。

ローダーコンポーネント（ PropTypes.node ）をpropsとして渡します。ローダーをレンダリングしたくない場合は、 nullを渡します。
Afaik、 render関数は、何もレンダリングしない場合、 undefinedではなくnullを返す必要があります。 したがって、値としてnullを渡すことは、私にとって正しい方法のように見えます。

私は（のラッパーInputNumberコンポーネントを実装した<input type="number">私が持っていたので、） propTypes私の小道具のためにvalue - PropTypes.number.isRequired 、と私は私のコンポーネントを使用する場合、I常にプロパティを渡しました。 しかし、今日、デフォルトでnull可能な値へのリンクを渡す必要があり、コンポーネントが警告を追加します。 私は想像することができる唯一の決定は変更することですpropTypes私の小道具のためのvalueするPropTypes.oneOfType([PropTypes.number, PropTypes.string])とセットdefaultProps NULLとして。 しかし、input type = numberは数字でのみ機能するはずなので、正しくないように感じます。

PropTypes.oneOfType([null, PropTypes.object]).isRequiredを実行しようとしているので、nullまたはオブジェクトのいずれかですが、これは現在不可能ですか？

次の関数が必要です： 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,
};

isRequiredなしでnullableを使用することは可能です（しかしかなり無意味です）。 isRequiredと互換性を持たせる理由は、 react/require-default-props eslintルールで機能するようにするためです。

私のユースケースは、コールバックを処理する単一のコンポーネントによってラップされた、共通のAPIに準拠する一連のコンポーネントです。 nullコールバックは「読み取り専用」を意味するため、ラッパーコンポーネントが意図的にnull渡すことがあります。 同時に、すべてのプロパティがサブコンポーネントに渡され、新しいプロパティが追加された場合にそれが失われないようにすることが重要です。 また、このAPIに準拠するすべてのコンポーネントにdefaultPropsのnullを提供したくありません。 彼らが知っている限り、発信者は値を指定している必要があります。

私は以前に書いたヘルパーを取り、それをパッケージに入れて、正しいことを証明するための一連のテストを行いました。

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これはビルド済みのjavascriptファイルのようです。 これは可能ですが、お勧めしません。 より良い結果を得るには、元のソースを要求するようにしてください。 @ ./~/prop-types/prop-types.js 1：482-489

PropTypes.oneOfType([null, PropTypes.object]).isRequiredを実行しようとしているので、nullまたはオブジェクトのいずれかですが、これは現在不可能ですか？

次の関数が必要です： Warning: Invalid argument supplied to oneOfType. Expected an array of check functions, but received null at index 1.

したがって、次のような関数を指定する必要があります。

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

実際、最後に「isRequired」が原因でエラーが発生しました。nullであると同時にrequiredは互換性がありません...
これは私のために働いたものです：

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])だけを使用することも奇妙なことに可能です（しかし、私は本当にそれをお勧めしません！）。 これはバグのように感じますが、そのようなコードが後のバージョンで存続することは期待できません。 また、これは以前に提案された方法と似ていますが、同じではないことに注意してください。

待つことができれば、信じられないほどゆっくりと動いているオープンPRがありますが、明らかにまだ検討中です。

そして、PRがマージされるまで、私が作成した背後にあるます。そうすれば、行の最後に.isRequiredを配置できるため、リンティングルールと互換性があります。

私見これは正しい動作ですが、文書化する必要があります。

私が目にする一般的なユースケースは、データのAPI呼び出しが終了する前にReactがコンポーネントをレンダリングすることです。 最初のレンダリングは、たとえば、アイテムのリスト（ items: null ）をレンダリングします。 その後、API呼び出しが終了し、 items配列が入力されます。

これを処理するための最良の方法はありますか？ このプロップが必要ですが、APIから取得する前はnullです。

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

@ davidje13このアプローチで少し問題が発生しました。 カバレッジテストには、カバーされない1/4のケースがあります。

nullまたは必要な文字列を指定できるprop'name 'が1つしかないコンポーネントLoginがあるとします。

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

したがって、そのプロパティタイプは次のとおりです。

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

このコンポーネントをテストするとき、実際には2つのシナリオ、nullまたは必須の文字列しかありません。

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

しかし、カバレッジは、私のテストのカバレッジが75％しかないことを示しています。
これに対する公式のアプローチはどうなるのだろうか。

欠落しているテストケースは、プロップチェックに失敗したもののように聞こえますか？ つまり、数値や未定義などを渡した場合、それは持つべきではありません。

欠落しているテストケースは、プロップチェックに失敗したもののように聞こえますか？ つまり、数値や未定義などを渡した場合、それは持つべきではありません。

いいえ、そうではありません。

undefinedを渡しても、カバレッジは拡張されません。
そして、とにかく数値を渡すことはできません。それは許可された値ではありません。

その場合はカバーできません。