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

Question

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

0

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

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

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

Мой компонент App React 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>;

user2082000 08 апр. 2016, в 21:38

Источник

0

Вы пытаетесь отобразить все элементы в this.props.items?
erichardson30 08 апр. 2016, в 19:25
0

Да, я пытаюсь отобразить все элементы!
user2082000 08 апр. 2016, в 19:27

Теги:

reactjs

ruby-on-rails

ruby

react-rails

2 ответа

Ещё вопросы

Вы пытаетесь отобразить все элементы в this.props.items?
Да, я пытаюсь отобразить все элементы!

Abhishek Kumar · Answer 1 · 2016-04-08T22-53-00.000Z

Вы можете перебирать список в 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
};

erichardson30 · Answer 2 · 2016-04-08T19-57-00.000Z

Поскольку this.state.items является массивом, вы не можете выгружать все элементы в таком массиве. Вы можете использовать API-интерфейс javascript и перебирать элементы и отображать их так:

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

Но вы можете использовать карту для объекта JavaScript?
Это просто один объект, который возвращается? Можете ли вы обновить свой пост с тем, как выглядят данные?