0

我正在使用 React-Rails gem 并items从 Rails 控制器访问 json 对象。

导轨控制器：

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

我的 ReactApp组件访问这些项目并尝试将其作为道具传递给子组件：

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`.

我该如何解决这个问题？有没有办法在我的 React 组件中轻松使用 JSON 对象？

现在我尝试将 JSON 对象包装在一个数组中：

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

2 回答 2

0

由于 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
};

如果您每次只取回一个对象，则 map 将不起作用，您需要按属性分解对象以显示所有内容：

render () {           
        return (
          <div>
              <div> Item : {this.props.items.a} , {this.props.items.b}, {this.props.items.c} </div>
          </div>
        );
}
于 2016-04-08T19:31:27.950 回答
0

您可以遍历Component中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
};
于 2016-04-08T21:20:02.827 回答