Question

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

我试图遵循React Tutorial

我正在尝试从json中的二级密钥获取数据。我能够使用Object.keys来做到这一点，但是当我尝试将它应用于我的数据集时，我不确定这里的问题是什么。当我尝试与其他数据集没有区别的注释数据集时，我无法得到任何东西。可以将Object.keys应用于存在多个密钥的数据集吗？有人可以帮忙吗？

请查看我的fiddle

这是我的代码

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

我的目标是构建一个简单的单页应用程序，我们可以使用key.symbol从json中搜索数据，所以我在数据中添加另一个级别，这样当我构建我的api时我可以把它放在那里使用符号。

如果有人能帮我解决这个问题，我将不胜感激。很抱歉在中间更改我的问题。谢谢你指出我正确的方向。

Answer 1

在Stock元素的componentDidMount方法中实现它。

这样的事情：

var Stock = React.createClass({
  ...
  render: function() {
  ...
  },
  componentDidMount: function() {
    let url = 'myStockApi/' + this.props.symbol;
    this.serverRequest = $.get(url, function(result) {
      let quote = result;
      this.setState({
        quote
      });
    }.bind(this));
  },
  componentWillUnmount: function() {
    this.serverRequest.abort();
  },
});

查看文档here。

Answer 2

我能够从here找到答案。我已经更新了我的帖子。请检查我的帖子中的代码。

如何使用Reactjs从json获取数据

2 个答案: