ReactJS: setTimeout() не работает?

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

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(), который тоже не работает. Любые огни на этом? Спасибо!

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

В любое время, когда мы создаем тайм-аут, мы должны очистить его на 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')
);

Ответ 5

Ваша область кода (this) будет вашим объектом window, а не вашим компонентом реакции, и именно поэтому он будет разбиваться следующим образом:

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

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

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

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

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