Question

当我习惯从json api获取数据时，它会抛出“意外令牌”错误。下面，我已经添加了我迄今为止尝试过的代码。让我从这个问题中解脱出来。我想长时间解决这个问题。

下面，

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>
    );
  }
});

Answer 1

您的代码中有几处错误

从getInitialState方法移动componentDidMount和render，这些方法应该是您的组件（Demo）类的子级，而不是render的子级方法
将dataType: 'json'添加到$.ajax，因为现在它返回字符串，但在您的情况下，您需要获取json
当您在this.setState中使用.done时，您应该将this设置为.done回调，因为现在this指的是$.ajax对象没有Demo，您可以使用.bind方法来执行此操作。
将this.props.data更改为this.state.data，因为位于州对象中的数据不在道具

records

数组使用它而不仅仅是data

Example

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>;
  }
});

当我在reactjs中使用jsop api时，抛出“意外令牌”错误？

1 个答案: