Javascript 投掷；意外标记“；错误，当我在reactjs中使用JSOPAPI时？

当我从json api获取数据时，它抛出了“意外令牌”错误。在下面，我已经添加了我的代码，我已经尝试过了。把我从这个问题上解脱出来。我一直在努力解决这个问题

这里,

var Demo=React.createClass({
render:function（）{
getInitialState:函数（）{
返回{
数据：[]
};
},
componentDidMount:函数（）{
$.ajax({
url:“http://www.w3schools.com/angular/customers.php"
}).完成（功能（数据）{
this.setState（{data:data}）
});
},
返回(
{this.props.data.map（函数（el，i）{
返回
{el.Name}
{el.City}
{el.Country}
;
}
);
}
});
var Stream=React.createClass({
render:function（）{
返回(
);
}
});

您的代码中有几个错误

从

render

方法中移动

getInitialState

和

componentDidMount

，这些方法应作为组件（

Demo

）类的子级，而不是

render

方法的子级

将

dataType:'json'

添加到

$.ajax

，因为现在它返回字符串，但在您的情况下，您需要获取

json

当您在

.done

中使用

this.setState

时，您应该将

this

设置为

.done

回调，因为现在

this

指的是

$。ajax

对象不是

演示

，您可以使用

.bind

方法来完成

将

this.props.data

更改为

this.state.data

，因为位于state对象中的数据不在props中

数据位于

记录中的数组

属性使用它，而不仅仅是

数据

var Demo=React.createClass({
getInitialState:函数（）{
返回{
数据：[]
};
},
componentDidMount:函数（）{
$.ajax({
url:“http://www.w3schools.com/angular/customers.php",
数据类型：“json”
}).完成（功能（响应）{
this.setState（{data:response.records}）；
}.约束（这个）；
},
render:function（）{
var customers=this.state.data.map（函数（el，i）{
返回
{el.Name}
{el.City}
{el.Country}
});
返回{客户}；
}
});

您的代码中有几个错误

从

render

方法中移动

getInitialState

和

componentDidMount

，这些方法应作为组件（

Demo

）类的子级，而不是

render

方法的子级

将

dataType:'json'

添加到

$.ajax

，因为现在它返回字符串，但在您的情况下，您需要获取

json

当您在

.done

中使用

this.setState

时，您应该将

this

设置为

.done

回调，因为现在

this

指的是

$。ajax

对象不是

演示

，您可以使用

.bind

方法来完成

将

this.props.data

更改为

this.state.data

，因为位于state对象中的数据不在props中

数据位于

记录中的数组

属性使用它，而不仅仅是

数据

var Demo=React.createClass({
getInitialState:函数（）{
返回{
数据：[]
};
},
componentDidMount:函数（）{
$.ajax({
url:“http://www.w3schools.com/angular/customers.php",
数据类型：“json”
}).完成（功能（响应）{
this.setState（{data:response.records}）；
}.约束（这个）；
},
render:function（）{
var customers=this.state.data.map（函数（el，i）{
返回
{el.Name}
{el.City}
{el.Country}
});
返回{客户}；
}
});

精彩的解释和巨大的贡献。。rocking@Alexander.非常感谢你兄弟的解释和贡献。。rocking@Alexander.谢谢你，兄弟。

var Demo = React.createClass({
    render: function() {
        getInitialState:function(){
            return {
                data:[]
            };
        },
        componentDidMount: function () {
            $.ajax({
              url: "http://www.w3schools.com/angular/customers.php"
            }).done(function(data) {
              this.setState({data: data})
            });
        },
        return (
            <div>
                {this.props.data.map(function(el,i) {
                    return <div key={i}>
                        <div>{el.Name}</div>
                        <div>{el.City}</div>
                        <div>{el.Country}</div>
                    </div>;
                }
            </div>
        );
    }
});

var Stream = React.createClass({
  render: function() {
    return (
        <div>
            <div className="scrollContent ">
                <Demo />
            </div>
        </div>
    );
  }
});

var Demo = React.createClass({
  getInitialState:function() {
    return {
      data :[]
    };
  },

  componentDidMount: function () {
    $.ajax({
      url: "http://www.w3schools.com/angular/customers.php",
      dataType: 'json'
    }).done(function(response) {
      this.setState({ data: response.records });
    }.bind(this));
  },

  render: function() {
    var customers = this.state.data.map(function(el,i) {
      return <div key={i}>
        <div>{el.Name}</div>
        <div>{el.City}</div>
        <div>{el.Country}</div>
      </div>
    });

    return <div>{ customers }</div>;
  }
});