javascript - react - 来自 url 的 json

Question

我正在这里学习 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) {

如果我在浏览器中调试，数据源不会显示，所以我猜测问题是为什么它不加载网址数据？

Answer 1

我检查了教程中的第 11 步，发现了这句话:

“注意:代码在此步骤将不起作用。”

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