在回调中使用 this.setState

IT技术 javascript callback reactjs this
2021-03-30 22:15:28

我有以下代码在react组件中获取 twitter 时间线:

  componentWillMount: function() {
    twitter.get('statuses/user_timeline',
    function(error, data) {
      this.setState({tweets: data})
     });
  }

但我无法在state那里设置,因为this未设置为该回调函数中的组件。

如何在该回调中设置状态?

nb console.log(data) 而不是 this.setState 工作正常,这就是为什么我怀疑问题出在 this 变量上。

3个回答

您可以设置this.bind这样的方法,并呼吁twitter.getcomponentDidMount如本example

componentDidMount: function() {
   twitter.get('statuses/user_timeline', function(error, data) {
      this.setState({tweets: data})
   }.bind(this)); // set this that refers to you React component
}

永远不要在 componentWillMount 中执行 ajax 调用。

在 componentDidMount 中进行

还有一个范围问题,为此使用亚历山大建议的(绑定)。另一种可能是:

componentDidMount: function() {
    var self = this;
    twitter.get('statuses/user_timeline', function(error, data) {
        self.setState({tweets: data})
    });
}

还有更多细节在这里http://facebook.github.io/react/tips/initial-ajax.html(已经由 klimo 在评论中加下划线)

把代码放在你的问题中,这样读我的眼睛很受伤
2021-06-08 22:15:28
谢谢你的提及,弗朗索瓦。要简要地添加到您的答案中,您可以使用 ES6 胖箭头来避免绑定或self = this完全避免绑定:((error, data) => { ...您需要像 Babel 这样的转译器)。
2021-06-09 22:15:28
componentDidMount对我来说似乎根本不火。我的代码:getInitialState: function(){ return({tweets: 'getInitialState'}) } , componentDidMount: function() { twitter.get('statuses/user_timeline', function(error, data) { this.setState({tweets: 'callback'}) console.log('callback') }.bind(this)); this.setState({tweets:'componentDidMount'}) console.log('componentDidMount') }呈现“getInitialState”
2021-06-15 22:15:28

有两种方法把它放在componentDidMount里面,你可以解决这个问题:

1. 将此作用域绑定到函数

.bind(this)

twitter.get('statuses/user_timeline', function(error, data) {
   this.setState({tweets: data})
}).bind(this);

2.使用粗箭头

=>

twitter.get('statuses/user_timeline', (error, data) => {
   this.setState({tweets: data})
});