Ayant ce code à l'esprit:

var Component = React.createClass({

    getInitialState: function () {
        return {position: 0};    
    },

    componentDidMount: function () {
        setTimeout(this.setState({position: 1}), 3000);
    },

    render: function () {
         return (
            <div className="component">
                {this.state.position}
            </div>
         ); 
    }

});

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

L'état n'est-il pas censé changer seulement après 3 secondes? Cela change immédiatement.

Mon objectif principal ici est de changer l'état toutes les 3 secondes (avec setInterval()), mais comme cela ne fonctionnait pas, j'ai essayé setTimeout(), ce qui ne fonctionne pas non plus. Des lumières à ce sujet? Merci!

Faire

setTimeout(
    function() {
        this.setState({ position: 1 });
    }
    .bind(this),
    3000
);

Sinon, vous passez le résultat de setStateà setTimeout.

Vous pouvez également utiliser les fonctions fléchées ES6 pour éviter l'utilisation du thismot-clé:

setTimeout(
  () => this.setState({ position: 1 }), 
  3000
);

setTimeout(() => {
  this.setState({ position: 1 });
}, 3000);

Ce qui précède fonctionnerait également car la fonction de flèche ES6 ne change pas le contexte de this.

Chaque fois que nous créons un timeout, nous devons l'effacer sur componentWillUnmount, s'il n'a pas encore été déclenché.

      let myVar;
         const Component = React.createClass({

            getInitialState: function () {
                return {position: 0};    
            },

            componentDidMount: function () {
                 myVar = setTimeout(()=> this.setState({position: 1}), 3000)
            },

            componentWillUnmount: () => {
              clearTimeout(myVar);
             };
            render: function () {
                 return (
                    <div className="component">
                        {this.state.position}
                    </div>
                 ); 
            }

        });

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

Je sais que c'est un peu vieux, mais il est important de noter que React recommande d'effacer l'intervalle lorsque le composant se démonte: https://reactjs.org/docs/state-and-lifecycle.html

J'aime donc ajouter cette réponse à cette discussion:

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

setStateest appelé immédiatement en raison de la parenthèse! Enveloppez-le dans une fonction anonyme, puis appelez-le:

setTimeout(function() {
    this.setState({position: 1})
}.bind(this), 3000);

Vous n'avez pas dit qui a appelé setTimeout

Voici comment appeler timeout sans appeler de fonctions supplémentaires.

1. Vous pouvez le faire sans effectuer de fonctions supplémentaires.

setTimeout(this.setState.bind(this, {position:1}), 3000);

Utilise function.prototype.bind ()

setTimeout prend l'emplacement de la fonction et la conserve dans le contexte.

2. Une autre façon de faire la même chose même en écrivant encore moins de code.

setTimeout(this.setState, 3000, {position:1});

Utilise probablement la même méthode de liaison à un moment donné

Le setTimeout prend uniquement l'emplacement de la fonction et la fonction a déjà le contexte? Quoi qu'il en soit, ça marche!

REMARQUE: ils fonctionnent avec toutes les fonctions que vous utilisez dans js.

Votre portée de code ( this) sera votre windowobjet, pas votre composant de réaction, et c'est pourquoisetTimeout(this.setState({position: 1}), 3000) se plantera de cette façon.

Cela vient de javascript pas de React, c'est la fermeture de js

Donc, afin de lier votre portée actuelle du composant react, procédez comme suit:

setTimeout(function(){this.setState({position: 1})}.bind(this), 3000);

Ou si votre navigateur prend en charge es6 ou que vos projets prennent en charge la compilation de es6 en es5, essayez également la fonction arrow, car arrow func est de résoudre ce problème:

setTimeout(()=>this.setState({position: 1}), 3000);

Il existe 3 façons d'accéder à la portée à l'intérieur de la fonction 'setTimeout'

Première,

const self = this
setTimeout(function() {
  self.setState({position:1})
}, 3000)

La deuxième consiste à utiliser la fonction de flèche ES6, car la fonction de flèche n'avait pas de portée (ceci)

setTimeout(()=> {
   this.setState({position:1})
}, 3000)

Le troisième est de lier la portée à l'intérieur de la fonction

setTimeout(function(){
   this.setState({position:1})
}.bind(this), 3000)

Vous avez fait une erreur de déclaration de syntaxe, utilisez la déclaration setTimeout appropriée

message:() => { 
  setTimeout(() => {this.setState({opened:false})},3000); 
  return 'Thanks for your time, have a nice day 😊! 
}