javascript - AJAX 请求未在我的 React 组件中设置 this.state.data 。

Question

我最近一直在使用 ReactJS，并且在使用 AJAX 请求时设置状态时遇到问题。

AJAX 请求正在服务器上发出请求并接收 200 代码，因此我知道 API 请求运行良好。不过React组件好像没有设置this.state.data。

这是组件代码:

export class Experiences extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }

  loadExperiencesFromServer() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: (data) => {
        this.setState({
          data: data
        })
      },
      error: (xhr, status, err) => {
              console.error(this.props.url, status, err.toString());
      }
    });
  }

  componentDidMount() {
    this.loadExperiencesFromServer();
  }

  render () {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
          <p>{this.state.data}</p>
        </div>
    );
  }
};

这就是我渲染组件的方式:

ReactDOM.render(<Experiences url='/about_me/experiences/' />, document.getElementById('genomics-geek-container'));

当我直接点击 API 时，我得到以下响应:

$ http http://127.0.0.1:8000/about_me/experiences/

HTTP/1.0 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Date: Wed, 27 Apr 2016 02:15:40 GMT
Server: WSGIServer/0.2 CPython/3.5.1
Vary: Accept, Cookie
X-Frame-Options: SAMEORIGIN

{
    "count": 1,
    "next": null,
    "previous": null,
    "results": [
        {
            "company": "Mike",
            "created": "2016-04-27T01:30:50.425111Z",
            "degree": "test",
            "description": "test",
            "ended": "2016-04-21",
            "experience_type": 1,
            "is_current_position": true,
            "location": "test",
            "owner": "geek",
            "position": "test",
            "started": "2016-04-27"
        }
    ]
}

所以我知道 API 正在返回数据，并且 React 组件正在我的浏览器上呈现，但由于某种原因没有数据加载到组件中。我缺少什么？预先感谢您的帮助!

Answer 1

你正在失去这方面的背景。

在你的构造函数中将其绑定(bind)到你的自定义函数

constructor() {
    super();
    this.state = {
      data: []
    };
    this.loadExperiencesFromServer = this.loadExperiencesFromServer.bind(this)
}