"Любое использование объекта с ключом должно быть завернуто в файл React.addons.createFragment(объект) перед тем, как передать его в качестве дочернего"

Ответ 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 вызвало ошибку, вам придется отследить его другими способами - например, просмотрев diff в исходном контроле коммита, который создал ошибки или путем исключения половины ваших элементов JSX за один раз, пока не найдете ту, которая заставляет ошибку уйти.

Ответ 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), и он пытался отобразить весь объект.

Ответ 3

Другой случай:

// 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>
  )
}

Ответ 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>