Question

我收到以下警告：

任何对键控对象的使用都应该在作为子进行传递之前包装在React.addons.createFragment（object）中。

导致此错误的原因是什么？如何解决？

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

另一个案例：

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

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

不要渲染Object，而是渲染String。

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

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

Answer 4

此警告的另一个可能原因：传入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>

＆＃34;对键控对象的任何使用都应该包装在React.addons.createFragment（object）中，然后作为子进行传递。

4 个答案: