react - json from url

我在这里学习react教程-

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

我在第11步"从服务器获取"上遇到了问题

这是我的.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数据？