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

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

本文关键字：设置 this state data 组件 React 请求 我的 AJAX      更新时间：2023-09-26

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

AJAX 请求在服务器上发出请求并接收 200 个代码，所以我知道 API 请求运行良好。但是，React 组件似乎没有 this.state.data set。

下面是组件代码：

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 组件正在我的浏览器上呈现，但由于某种原因没有数据加载到组件中。我错过了什么？提前感谢您的帮助！

你正在失去这个上下文。

在您的构造函数中，将其绑定到自定义函数

constructor() {
    super();
    this.state = {
      data: []
    };
    this.loadExperiencesFromServer = this.loadExperiencesFromServer.bind(this)
}
相关文章：