Question

我正在使用React-Rails gem并从Rails控制器访问json对象for /f "delims=*" %a in ('dir File*_EN.txt /b /s') do ren "%a" File*_ENU.txt。

Rails控制器：

items

My React class ItemsController < ApplicationController def index @items = Item.all render json: @items end end组件访问这些项目并尝试将其作为prop传递给子组件：

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组件中轻松使用JSON对象？

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

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

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组件中的App.js列表。并为每个项创建一个React.Component项。

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

function initBuild() {
    if (!grunt.option('env')) {
        grunt.option('env', 'your-default-value-here');
    }

    grunt.task.run(taskList);
}

grunt.registerTask('build', initBuild);

反应json对象无效作为React子项

2 个答案: