私は本React Quickly
コードスニペットをフォローしています。
そして、babelでコンパイルした後はコードを実行できません。
私のコードは次のようなものです:
class DateTimeNow extends React.Component{
render(){
let dateTimeNow = new Date();
return <span>Current date and time is {dateTimeNow}.</span>;
}
}
ReactDOM.render(
<DateTimeNow/>,
document.getElementById('content')
);
ブラウザによって報告されるエラーメッセージは次のとおりです。
Uncaught Invariant Violation: Objects are not valid as a React child (found: Mon Oct 17 2016 09:12:00 GMT+0800 (CST)). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of
DateTimeNow .
エラーが発生する理由を教えてください。
どうもありがとうございました!
_feature_をリクエストしますか、それとも_bug_を報告しますか?
現在の動作は何ですか?
エラーメッセージ:Uncaught Invariant Violation:Objects not valid as React child(found:Mon Oct 17 2016 09:12:00 GMT + 0800(CST))。 子のコレクションをレンダリングする場合は、代わりに配列を使用するか、ReactアドオンのcreateFragment(object)を使用してオブジェクトをラップします。 DateTimeNow
のレンダリング方法を確認してください。
現在の動作がバグである場合は、再現する手順と、可能であればhttps://jsfiddle.netまたは同様の方法(テンプレート:https://jsfiddle.net/reactjs/69z2wepo/)を介して問題の最小限のデモを提供してください。
期待される動作は何ですか?
スパンタグは現在の時刻を表示します
Reactのどのバージョン、およびどのブラウザ/ OSがこの問題の影響を受けますか?
React 15.3.2
簡単に言うと、dateTimeNow変数でtoString()
メソッドを呼び出す必要があります。これは、文字列ではなく、date_object_であるためです。 つまり、エラーメッセージが参照している「オブジェクト」の1つです。
return <span>Current date and time is {dateTimeNow.toUTCString()}.</span>;
とはいえ、エラーメッセージは日付を文字列としてレンダリングするだけなので、最初は混乱を招きます。 たとえば、 {dateTimeNow}
を{ {a: 1} }
などのオブジェクトに置き換えると、エラーメッセージはもう少し意味があります。
Uncaught Error: Objects are not valid as a React child (found: object with keys {a}).
https://github.com/facebook/react/issues/7988#issuecomment-254148427は正しいです。
日付はJSのオブジェクトですが、レンダリング出力にはReact要素、文字列、数値のみが含まれる場合があります。 toString()
ような方法で文字列をフォーマットすると機能します。
そのようなメソッドのリストはMDNにあります。
乾杯!
Reactが.toString()
を自動的に呼び出すことができないのはなぜですか? オーバーヘッドが多すぎますか?
最も参考になるコメント
簡単に言うと、dateTimeNow変数で
toString()
メソッドを呼び出す必要があります。これは、文字列ではなく、date_object_であるためです。 つまり、エラーメッセージが参照している「オブジェクト」の1つです。とはいえ、エラーメッセージは日付を文字列としてレンダリングするだけなので、最初は混乱を招きます。 たとえば、
{dateTimeNow}
を{ {a: 1} }
などのオブジェクトに置き換えると、エラーメッセージはもう少し意味があります。