TypeError：无法读取未定义的属性“setState”

我试图在ajaxcallback从REST api接收数据后setState的组件。 这里是我的组件构造函数的代码

constructor(props) { super(props); this.state = { posts: [] }; this.getPosts = this.getPosts.bind(this); } 

然后我有一个componentDidMount方法，看起来像下面。

 componentDidMount() { this.getPosts(); } 

现在，这里是我正在做Ajax请求的getPosts函数。

 getPosts = () => { $.ajax({ type: 'get', url: urlname, success: function(data) { this.setState( { posts: data } ) } }); } 

我正在绑定设置状态，但我得到以下错误。

 this.setState is not a function 

不确定是什么原因造成的。 如果有人指向正确的方向，这将是非常有帮助的。 提前致谢。

Answer 1

绑定callback函数也是为了使callback函数指向React Component的上下文而不是callback函数

 getPosts = () => { $.ajax({ type: 'get', url: urlname, success: (data) => { this.setState( { posts: data } ) } }); } 

Answer 2

这个问题与这个问题的背景有关。 请试试这个：

 let self = this; getPosts = () => { $.ajax({ type: 'get', url: urlname, success: function(data) { self.setState( { posts: data } ) } }); } 

或者你可以使用bind：

 getPosts = () => { $.ajax({ type: 'get', url: urlname, success: function(data) { self.setState( { posts: data } ) } }); }.bind(this) 

Answer 3

您必须将上下文存储到variables中，因为callback中“this”引用不可用。 尝试以下解决scheme

 getPosts = () => { let that=this; $.ajax({ type: 'get', url: urlname, success: function(data) { that.setState( { posts: data } ) } }); }