reactjs - "Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child"

Question

我收到以下警告:

Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.

是什么原因导致此错误以及如何修复它？

Answer 1

如果您尝试将 JavaScript 对象(而不是 JSX 元素或字符串)插入到某些 JSX 中，则会发生此错误。

例如，这是一个产生警告的小案例:

import React from 'react';
window.React = React;
import ReactDOM from 'react-dom';
var content = {foo: 'bar'};
ReactDOM.render(<div>{content}</div>, document.getElementById('some-element'));

尽管错误消息建议使用 createFragment为了解决这个问题，更可能的情况是您将一个变量插入到某个 JSX 中，您认为该变量是字符串或 JSX 元素，但实际上是其他类型的对象。

由于该消息没有准确地告诉您 JSX 中的哪个表达式导致了错误，因此您必须通过其他方式来追踪它 - 例如，通过查看产生该错误的提交的源代码管理中的差异错误，或者一次消除一半的 JSX 元素，直到找到使错误消失的元素。