"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 元素，直到找到使错误消失的元素。

Answer 2

也有这个问题，但我的原因略有不同。

我试图像这样在对象内部写出一个值：

var FooObject = React.createClass({
    render: function() {
        var object_to_write = {'foo': 'bar'};
        return (
            <div>
                I expect this text to say <b>bar</b> and it says <b>{object_to_write}</b>
            </div>
            );
    }
});

React 给我 keyed object should be wrapped 错误...

当然，我的错误是由于我没有指定我想使用的值（在这个例子中，foo）造成的，它试图渲染出整个对象。

Answer 3

此警告的另一个可能原因：传入一个 React 元素对象而不是数组。

// Bad - this causes the warning 
var items = { 
  23 : <Todo name="some things">, 
  24 : <Todo name="other things">
};

return <ul>items</ul>

相反，您应该只传递元素数组，就像这样 -

// Good - no complaints 
var items = [
  <Todo name="some things">, 
  <Todo name="other things">
];

return <ul>items</ul>

Answer 4

另一种情况：

// Bad - this causes the warning
this.state = { content: {} }

render() {
  return (
    <div>
      {this.state.content}
    </div>
  )
}

不渲染对象，而是渲染字符串。

// Good - no complaints 
this.state = { content: "" }

render() {
  return (
    <div>
      {this.state.content}
    </div>
  )
}

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

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

reactjs