1. ホーム
  2. javascript

[解決済み] ReactJS:setTimeout()が機能しない?

2022-03-10 21:58:43

質問

このようなコードを考えています。

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