Teniendo este código en mente:

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')
);

¿No se supone que el estado cambiará solo después de 3 segundos? Está cambiando de inmediato.

Mi objetivo principal aquí es cambiar el estado cada 3 segundos (con setInterval()), pero como no estaba funcionando, lo intenté setTimeout(), que tampoco funciona. ¿Alguna luz sobre esto? ¡Gracias!

Hacer

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

De lo contrario, está pasando el resultado de setStatea setTimeout.

También puede utilizar las funciones de flecha de ES6 para evitar el uso de thispalabras clave:

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

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

Lo anterior también funcionaría porque la función de flecha ES6 no cambia el contexto de this.

Cada vez que creamos un tiempo de espera, deberíamos borrarlo en componentWillUnmount, si aún no se ha disparado.

      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')
);

Sé que esto es un poco antiguo, pero es importante notar que React recomienda borrar el intervalo cuando el componente se desmonta: https://reactjs.org/docs/state-and-lifecycle.html

Entonces me gusta agregar esta respuesta a esta discusión:

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

setStatese invoca inmediatamente debido al paréntesis! Envuélvalo en una función anónima, luego llámelo:

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

No dijiste quién llamó a setTimeout

Aquí se explica cómo se llama al tiempo de espera sin llamar a funciones adicionales.

1. Puede hacer esto sin realizar funciones adicionales.

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

Utiliza function.prototype.bind ()

setTimeout toma la ubicación de la función y la mantiene en el contexto.

2. Otra forma de hacer lo mismo incluso escribiendo menos código.

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

Probablemente use el mismo método de enlace en algún momento

¿El setTimeout solo toma la ubicación de la función y la función ya tiene el contexto? De todos modos, ¡funciona!

NOTA: Estos funcionan con cualquier función que use en js.

Su alcance de código ( this) será su windowobjeto, no su componente de reacción, y es por eso que setTimeout(this.setState({position: 1}), 3000)se bloqueará de esta manera.

Eso viene de javascript, no de React, es un cierre de js

Entonces, para vincular el alcance del componente de reacción actual, haga esto:

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

O si su navegador es compatible con es6 o sus proyectos son compatibles con la compilación de es6 a es5, pruebe también la función de flecha, ya que la función de flecha es para solucionar 'este' problema:

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

Hay 3 formas de acceder al alcance dentro de la función 'setTimeout'

Primero,

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

El segundo es usar la función de flecha ES6, porque la función de flecha no tenía alcance (esto)

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

El tercero es vincular el alcance dentro de la función

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

Hizo un error de declaración de sintaxis, use la declaración setTimeout adecuada

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