ReactJS: setTimeout() が機能しない? 質問する

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

thisキーワードの使用を避けるために、ES6 矢印関数を使用することもできます。

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

おすすめ記事