反应 - json 来自 url

Question

我正在阅读这里的 React 教程 -

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

我在第 11 步遇到问题"Fetching from the Server"

这是我的 .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 步，发现了这句话：

"Note: the code will not be working at this step."

在第 13 步，介绍了从服务器获取数据的函数。现在您只是传递一个 url 字符串。

反应 - json 来自 url

react - json from url

javascript

reactjs

react-jsx