如何使用Reactjs从json获取数据

我知道这是非常基本的。但如果有人能帮助我理解如何使用React js从json获取数据，我将不胜感激。 我刚刚开始学习React，所以我很想知道是否有任何方法可以使用它从复杂的json获取数据

我已经试着按照教程做了

我试图从json中的第二级键获取数据。我可以使用Object.keys实现这一点，但当我尝试将其应用于数据集时，我不确定这里的问题是什么。当我尝试使用与其他数据集没有太大区别的注释数据集时，我无法得到任何东西。Object.keys是否可以应用于有多个键的数据集？有人能帮忙吗

请检查我的

这是我的密码

var SearchStock = React.createClass({

  getInitialState: function() {
    return {searchString: ''};
  },

  handleChange: function(e) {
    this.setState({searchString: e.target.value});
  },

  render: function() {
    var stocks = this.props.items, searchString = this.state.searchString.trim().toLowerCase();

    if (searchString.length > 0) {
      stocks = stocks.filter(function(l) {
        // return l.name.toLowerCase().match(searchString);
        return l[Object.keys(l)[0]]["name"].toLowerCase().match(searchString);
      });
    }

    return <div >
      < input type = "text" value = {this.state.searchString} onChange = {this.handleChange} placeholder = "Type here" / >
      < ul > 
      {stocks.map(function(l) {
            return <li > {l[Object.keys(l)[0]]["name"]} < /li>
            // return <li > {l[Object.keys(l)[0]]["name"]} < /li>
        })
      } 
      < /ul> 
    < /div>;
  }
});

// var stocks = [{"F": {"symbol": "F", "name": "Ford Motor", "bidPrice": 13.41, "askPrice": 13.36}}, {"GE": {"symbol": "GE", "name": "General Electric", "bidPrice": 32.33, "askPrice": 32.39}}, {"JNJ: {"symbol": "JNJ", "name": "Johnson \u0026 Johnson", "bidPrice": 121.0, "askPrice": 123.0,}}];

var stocks = [{"symbol": {"symbol": "F", "name": "Ford Motors"}, "name": "Ford Motor", "bidPrice": 13.41, "askPrice": 13.36}, {"symbol": {"symbol": "GE", "name": "General Electronics"}, "name": "General Electric", "bidPrice": 32.33, "askPrice": 32.39}, {"symbol": {"symbol": "JNJ", "name": "Johnson \u0026 Johnson"}, "name": "Johnson \u0026 Johnson", "bidPrice": 121.0, "askPrice": 123.0,}];

ReactDOM.render( < SearchStock items = {stocks} />,document.getElementById('container'));

var SearchStock=React.createClass({
getInitialState:函数（）{
返回{searchString:''}；
},
handleChange:函数（e）{
this.setState（{searchString:e.target.value}）；
},
render:function（）{
var stocks=this.props.items，searchString=this.state.searchString.trim（）.toLowerCase（）；
如果（searchString.length>0）{
库存=库存。过滤器（函数（l）{
//返回l.name.toLowerCase（）.match（搜索字符串）；
返回l[Object.keys（l）[0][“name”].toLowerCase（）.match（searchString）；
});
}
返回


{stocks.map（函数（l））{
return
{l[Object.keys（l）[0][“name”]}
//return
{l[Object.keys（l）[0][“name”]}
})
}