首页 文章

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

提问于
浏览 次
2

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

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

然后我有一个看起来像下面的 componentDidMount 方法 .

componentDidMount() {
        this.getPosts();
}

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

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

我想要设置状态，但我收到以下错误 .

this.setState is not a function

不确定是什么导致了这一点 . 如果有人指出我正确的方向，那将是非常有帮助的 . 提前致谢 .

javascript jquery ajax reactjs this

3 回答

  • 5

    绑定回调函数也是为了使回调内的 this 指向React Component的上下文而不是回调函数

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

    或者你可以使用绑定

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

    这个问题与失去this的背景有关 . 请试试这个：

    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)
    回复于
  • 2

    您必须将上下文存储到变量中，因为“this”引用在回调中不可用 . 尝试以下解决方案

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

相关问题