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

你失去了这方面的背景。

在你的构造函数中将它绑定到你的自定义函数

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

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

AJAX request is not setting this.state.data in my React component.

javascript

ajax

jquery

reactjs

es6-module-loader