javascript - prevstate - Usando this.setState en una devolución de llamada

setstate prevstate react

Question

Tengo el siguiente código para obtener una línea de tiempo de Twitter en un componente de reacción:

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

Pero no puedo establecer el state allí, porque this no está configurado para el componente en esa función de devolución de llamada.

¿Cómo puedo establecer el estado dentro de esa devolución de llamada?

nb console.log (data) en lugar de this.setState funciona bien, por lo que sospecho que el problema es con esta variable.

Answer 1

Nunca realice una llamada ajax en componentWillMount.

Hágalo en componentDidMount .

También hay un problema de alcance, para ese uso lo que Alexander sugiere (enlace). Otra posibilidad es:

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

También más detalles aquí http://facebook.github.io/react/tips/initial-ajax.html (ya subrayado por klimo en los comentarios)

Answer 2

Puede configurar this con el método .bind así y llamar a twitter.get en componentDidMount como en este 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
}

Example

Answer 3

Hay 2 formas de ponerlo dentro de componentDidMount , puedes resolver el problema:

1. Enlazar este alcance a la función

.bind (esto)

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

2. Usa la flecha adiposa

=>

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