TypeError:无法读取未定义的属性“setState"

2022-01-31 00:00:00 reactjs jquery javascript ajax this

我正在尝试在 ajax 回调从 REST api 接收数据后设置组件的状态.这是我的组件构造函数代码

I am trying to setState of a component after a ajax callback receives data from REST api. here's my code for the component constructor

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

然后我有一个 componentDidMount 方法，如下所示.

Then I have a componentDidMount method that looks like following.

componentDidMount() {
        this.getPosts();
}

现在这是我正在执行 ajax 请求的 getPosts 函数.

Now here's my getPosts function where I am doing the ajax request. 

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

我想设置状态，但出现以下错误.

I am tying to set the State but I am getting the following error. 

this.setState is not a function

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

Not really sure what is causing this. It would be really helpful if someone points me to the right direction. Thanks in advance.

推荐答案

还要绑定回调函数，让回调中的 this 指向 React 组件的上下文而不是回调函数

Bind the callback function also so that this inside the callback points to the context of the React Component and not the callback function

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

或者你可以使用 bind like

or you could use bind like

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

相关文章