このコードを念頭に置いて：

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

それ以外の場合は、setStateto の結果を渡します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で使用するすべての関数で機能します。

コードスコープ（this）はwindow、reactコンポーネントではなくオブジェクトになりますsetTimeout(this.setState({position: 1}), 3000)。そのため、この方法でクラッシュします。

それはReactではなくjavascriptから来ています、それはjsの閉鎖です

したがって、現在の反応コンポーネントのスコープをバインドするには、次のようにします。

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

または、ブラウザがes6をサポートしているか、projsがes6をes5にコンパイルすることをサポートしている場合は、矢印関数も試してください。

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

「setTimeout」関数内のスコープにアクセスする方法は3つあります

最初、

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

2つ目は、ES6の矢印関数を使用することです。矢印関数にそれ自体のスコープがありませんでした（これ）

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

3つ目は、スコープを関数内にバインドすることです。

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