Question

我在这里通过反应教程 -

http://facebook.github.io/react/docs/tutorial.html

我在第11步＆＃34;从服务器获取问题＆＃34;

这是我的.js文件 -

var WGGroupList = React.createClass({
  render: function() {
    var wggroupNodes = this.state.data.map(function(wggroup) {
      return (
        <WGGroup name={wggroup.name} key={wggroup.id}>
          {wggroup.description}
        </WGGroup>
      );
    });
    return (
      <div className="wggroupList">
        {wggroupNodes}
      </div>
    );
  }
});

var WGGroupForm = React.createClass({
  render: function() {
    return (
      <div className="wggroupForm">
        Hello, world! I am a Widget Group Form.
      </div>
    );
  }
});

var WGGroupBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  render: function() {
    return (
      <div className="wggroupBox">
        <h1>Description</h1>
        <WGGroupList data={this.state.data} />
//        <WGGroupList data={this.props.data} />
        <WGGroupForm />
      </div>
    );
  }
});

var WGGroup = React.createClass({
  render: function() {
    return (
      <div className="wggroups">
        <h2 className="wggroupName">
          {this.state.data.name}
        </h2>
        {this.state.data.children}
      </div>
    );
  }
});

ReactDOM.render(
  <WGGroupBox data="http://servername/api/wggroups/?format=json" />,
//  <WGGroupBox data={data} />,
  document.getElementById('content')
);

如果我之前使用硬编码数据做示例，那么它是有效的 -

var data = [
  {id: 1, name: "Primary Widgets", description: "This is my Primary Widget group"},
  {id: 2, name: "Secondary Widgets", description: "This is my secondary Widget group"}
];

API提供的json与上面的格式完全相同。那么，为什么，如果使用我的URL，我会得到以下内容 -

Uncaught TypeError: Cannot read property 'data' of null

它在这条线上失败了 -

var wggroupNodes = this.state.data.map(function(wggroup) {

如果我在浏览器中调试数据源没有显示，那么我猜测问题是为什么它没有加载url数据？

Answer 1

我检查了教程中的第11步并遇到了这句话：

＆＃34;注意：代码在此步骤不起作用。＆＃34;

在步骤13中，引入了从服务器获取数据的功能..现在你只是传递一个url-string。

反应 - 来自网址的json

1 个答案: