私のコンポーネントのレンダリング関数では、次のようになっています。
render() {
const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
});
return (
<div>
...
<ul>
{items}
</ul>
...
</div>
);
}
となっており、レンダリングは正常に行われますが、<li>
要素をクリックすると以下のようなエラーが発生します。
Uncaught Error:Invariant Violation:Object is not valid as a React child (found: object with keys {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs})を使用しています。)子のコレクションをレンダリングしたい場合は、代わりに配列を使用するか、以下のように createFragment(object) を使用してオブジェクトをラップしてください。 ReactアドオンのWelcome`のレンダリングメソッドを確認してください。
map関数の中で、this.onItemClick.bind(this, item)
を(e) => onItemClick(e, item)
に変更すると、すべてが期待通りに動作します。
どなたか、私が何を間違っているのか、なぜこのエラーが出るのかを説明していただけると助かります。
UPDATE 1: onItemClick関数は以下のようになっており、this.setStateを削除するとエラーが消えました。
onItemClick(e, item) {
this.setState({
lang: item,
});
}
しかし、このコンポーネントの状態を更新する必要があるため、この行を削除することはできません。
このエラーが発生した原因は、文字列値として期待していたObjectを、意図せずにJSXコードに含めてしまったことにあります。
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
残念なことに、Reactのエラーメッセージは、問題が存在する行を指し示すのには適していませんでした。私は、コンポーネントに渡される "props" を認識するまで、スタックトレースをずっと遡り、問題のあるコードを見つけました。
文字列値であるオブジェクトのプロパティを参照するか、オブジェクトを適切な文字列表現に変換する必要があります。実際にオブジェクトの内容を見たいのであれば、JSON.stringify
という選択肢もあるでしょう。
zerkmsさんのコメント](https://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child/33118025#comment54048780_33117449)のおかげで、自分の愚かな間違いに気づくことができました。
onItemClick(item, e)とすべきところを、
onItemClick(e, item)`としてしまったのです。