React: 変数は新しいDate()を参照し、子要素にすることはできません。

作成日 2016年10月17日  ·  3コメント  ·  ソース: facebook/react

私は本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}).

全てのコメント3件

簡単に言うと、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()を自動的に呼び出すことができないのはなぜですか? オーバーヘッドが多すぎますか?

このページは役に立ちましたか?
0 / 5 - 0 評価