React v16：Uncaught TypeError：未定義のプロパティ 'object'を読み取ることができません

Question

このエラーが発生していますが、何が間違っているのかわからない、コードは単純です。とても基本的ですが、それを理解することはできません。私は流星1.5.3を使用してい

がドキュメントに反応から16

import React, { Component, PropTypes } from 'react'; 

export default class ListMeds extends Component { 
    render(){ 
     return(
      <li>{this.props.meds.text}</li> 
     ); 
    } 
} 
ListMeds.propTypes = { 
    meds: React.PropTypes.object.isRequired, 
}; 

Answer 1

このエラーは、React.jsの16番目のバージョンを使用したために表示されます。 In thisブログ記事（React.jsバージョン16の発表）あなたが読むことができます：

The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types...

（あなたがnpmを使用している場合）あなたがしてprop-typesモジュールをインストールする必要があります。

npm install --save prop-types 

または

yarn add prop-types 

yarnの場合は

です。そして、あなたのコードをこのように書き換える：

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 

export default class ListMeds extends Component { 
    render(){ 
     return(
      <li>{this.props.meds.text}</li> 
     ); 
    } 
} 
ListMeds.propTypes = { 
    meds: PropTypes.object.isRequired, 
}; 

Answer 2

反応し、

Note: React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead. We provide a codemod script to automate the conversion.

はhttps://reactjs.org/docs/typechecking-with-proptypes.html
プロップタイプライブラリを参照してください：https://github.com/facebook/prop-types
パッケージとインポートをインストールします。それはあなたのコード内にあります。

Answer 3

React 15+を使用している場合は、prop-typesパッケージを別途インポートする必要があります。あなたのコードは次のようになります。

import React, { Component } from 'react'; 
 
import PropTypes from 'prop-types'; 
 

 
export default class ListMeds extends Component { 
 
    render(){ 
 
     return(
 
      <li>{this.props.meds.text}</li> 
 
     ); 
 
    } 
 
} 
 
ListMeds.propTypes = { 
 
    meds: React.PropTypes.object.isRequired, 
 
};

注エラーがReact.PropTypesを意味し、「未定義のオブジェクトが」定義されていないと言うこと。

Answer 4

受け入れ答えは正しくプロップタイプは今、独自のパッケージであり、私はちょうどあなたがES6のクラスを作成し、すでにES6 +の機能を使用している場合、それは可能性があることを追加したいと述べていますPropTypesをクラス自体の静的変数として設定するのはもっと慣れてください（これは適切なプリセットでBabelを使用する環境に適用されます）。

export default class ListMeds extends Component { 
    static propTypes = { 
     // propTypes 
    } 
    render() { 
     // etc 
    } 
} 

InstagramエンジニアはReact and ES6+に素晴らしい投稿を書き込みました。クラスフィールドhereとすべての提案hereの提案を確認できます。