Реакция json Объекты недействительны в качестве дочернего элемента React

Question

Я использую камень React-Rails и получаю доступ к объекту json items с контроллера Rails.

Rails контроллер:

class ItemsController < ApplicationController 
    def index 
    @items = Item.all 
    render json: @items 
    end 
end 

Мой Реагировать App компонент получают доступ к этим пунктам и пытаются передать его в качестве опоры для ребенка компонента:

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      items: {}, 
      activeTab: 'items' 
     }; 
    } 

    componentDidMount() { 
     $.getJSON('/items.json', (response) => { 
      this.setState({ items: response }) 
     }); 
    } 

    render() { 
     return (
      <div> 
       <ItemsContent items={this.state.items}> 
      </div> 
     ); 
    } 
} 

И этот ребенок компонента выглядит следующим образом:

class ItemsContent extends React.Component { 
    render() {   
    return (
     <div> 
     <div>Items: {this.props.items}</div> 
     </div> 
    ); 
    } 
} 

ItemsContent.propTypes = { 
    items: React.PropTypes.object 
}; 

И вот эта ошибка:

react.js?body=1:1324 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `ItemsContent`. 

Как обойти это? Есть ли способ легко использовать объекты JSON в моих компонентах React?

Прямо сейчас я попытался обертывание объект JSON в массив:

  tabbedContent = <ItemsContent items={[this.state.items]}></ItemsContent>; 

Answer 1

Поскольку this.state.items является массивом, вы не можете сбросить все элементы в массиве, как это. Вы можете использовать JavaScript API массива и итерацию по элементам и отображать их следующим образом:

class ItemsContent extends React.Component { 
    render() {   
    return (
     <div> 
     { 
      this.props.items.map(function(item) { 
       return <div> Item : {item} </div> 
     } 
     </div> 
    ); 
    } 
} 

ItemsContent.propTypes = { 
    items: React.PropTypes.object 
}; 

Если вы только получаете обратно один объект каждый раз, то карта не будет работать, и вы должны выйти на объект, свойство для того, чтобы отобразить все:

render() {   
     return (
      <div> 
       <div> Item : {this.props.items.a} , {this.props.items.b}, {this.props.items.c} </div> 
      </div> 
     ); 
} 

Answer 2

Вы можете перемещаться по списку в render() из App компонента. Создайте элемент React.Component для каждого из элементов.

App.js

render() { 
     return (
      <div> 
       this.state.items.map(function(item){ 
        <Item value={item} key={}> 
       }); 
      </div> 
     ); 
    } 

В Item.js

class Item extends React.Component { 
    render() {   
    return (
     <div> 
     return <div> Item : {this.props.value} </div> 
     </div> 
    ); 
    } 
} 

Item.propTypes = { 
    value: React.PropTypes.object 
};