Имея в виду этот код:

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

Разве состояние не должно измениться только через 3 секунды? Это сразу меняется.

Моя основная цель здесь - менять состояние каждые 3 секунды (с setInterval()), но, поскольку это не работало, я попробовал setTimeout(), что тоже не работает. Есть свет на этом? Спасибо!

Делать

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

В противном случае вы передаете результат setStateв setTimeout.

Вы также можете использовать стрелочные функции ES6, чтобы избежать использования thisключевого слова:

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

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

Вышеупомянутое также будет работать, потому что функция стрелки ES6 не меняет контекст this.

Каждый раз, когда мы создаем тайм-аут, мы должны очистить его для componentWillUnmount, если он еще не сработал.

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

Я знаю, что это немного устарело, но важно отметить, что React рекомендует очищать интервал, когда компонент отключается: https://reactjs.org/docs/state-and-lifecycle.html

Поэтому я хотел бы добавить этот ответ к этому обсуждению:

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

setStateвызывается немедленно из-за скобок! Оберните его анонимной функцией, а затем вызовите:

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

Вы не сказали, кто вызвал setTimeout

Вот как вы вызываете тайм-аут без вызова дополнительных функций.

1. Вы можете сделать это без дополнительных функций.

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

Использует function.prototype.bind ()

setTimeout принимает местоположение функции и сохраняет его в контексте.

2. Другой способ сделать то же самое, даже написав еще меньше кода.

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

Возможно, в какой-то момент использует тот же метод привязки

SetTimeout принимает только местоположение функции, а у функции уже есть контекст? Во всяком случае, работает!

ПРИМЕЧАНИЕ. Они работают с любой функцией, которую вы используете в js.

Ваш код scope ( this) будет вашим windowобъектом, а не вашим реагирующим компонентом, и именно поэтому он setTimeout(this.setState({position: 1}), 3000)выйдет из строя.

Это исходит из javascript, а не из React, это закрытие js

Итак, чтобы привязать текущую область действия компонента реакции, сделайте следующее:

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

Или, если ваш браузер поддерживает es6 или ваши проекты поддерживают компиляцию es6 в es5, попробуйте также стрелочную функцию, так как стрелочная функция предназначена для исправления этой проблемы:

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

Есть 3 способа получить доступ к области внутри функции setTimeout

Первый,

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

Во-вторых, использовать стрелочную функцию ES6, потому что стрелочная функция не имеет области действия (это)

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

Третий - привязать область видимости внутри функции

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

Вы сделали ошибку объявления синтаксиса, используйте правильное объявление setTimeout

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

Попробуйте использовать синтаксис ES6 установленного тайм-аута. Обычный javascript setTimeout () не будет работать в React JS

setTimeout(
      () => this.setState({ position: 100 }), 
      5000
    );