当在componentDidmount中使用与jquery进行反应时，this.setState（）不是一个函数 [英] this.setState() is not a function when using react with jquery inside componentDidmount

问题描述

当我使用es6和jquery的ajax函数做出反应时，我得到 this.setState（）不是一个函数错误。我尝试使用 this.componentDidmount = this.componentDidmount.bind（this）; 在构造函数中绑定，但仍然不起作用。

When I use react with es6 and jquery's ajax function, I got this.setState() is not a function error. I tried bind this within constructor using this.componentDidmount = this.componentDidmount.bind(this);, but still not working.

有人可以帮我吗？谢谢！

Can any one help me? Thanks!

这是我的代码：

import React from 'react';
import $ from 'jquery';

class UserGist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      lastGistUrl: ''
    };
  }

  componentDidMount() {
    this.serverRequest = $.get(this.props.source, function(result) {
      let lastGist = result[0];
      this.setState({
        userName: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    });
  }

  componentWillUnmount() {
    this.serverRequest.abort();
  }

  render() {
    return(
      <div>
        {this.state.userName}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    )
  }
}

export default UserGist;

推荐答案

this componentDidMount（）中的回调函数的c $ c>上下文未设置。

The this context for the callback function inside componentDidMount() isn't set.

您可以使用箭头功能可以这样做：

You could use an arrow function to do it, like so:

this.serverRequest = $.get(this.props.source, (result) => {
  let lastGist = result[0];
  this.setState({
    userName: lastGist.owner.login,
    lastGistUrl: lastGist.html_url
  });
})

这篇关于当在componentDidmount中使用与jquery进行反应时，this.setState（）不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！