Маючи на увазі цей код:

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.

Щоразу, коли ми створюємо час очікування, ми повинні очистити його на компонентіWillUnmount, якщо він ще не спрацював.

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

Використовує функцію.prototype.bind ()

setTimeout визначає місце розташування функції та зберігає його в контексті.

2. Ще один спосіб зробити те саме, навіть написавши ще менше коду.

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

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

SetTimeout бере лише місце розташування функції, а функція вже має контекст? У всякому разі, це працює!

ПРИМІТКА. Вони працюють з будь-якою функцією, яку ви використовуєте в js.

Ваша область коду ( this) буде вашим windowоб'єктом, а не вашим компонентом реагування, і саме тому він setTimeout(this.setState({position: 1}), 3000)буде аварійним чином.

Це походить від javascript, а не React, це закриття js

Отже, щоб прив’язати поточну область реагування компонента, зробіть так:

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

Або якщо ваш браузер підтримує es6 або ваш projs підтримує компіляцію es6 до es5, спробуйте також функцію стрілки, оскільки стрілка func має вирішити цю проблему:

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 😊! 
}