Memperhatikan kode ini:

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

Bukankah keadaan seharusnya berubah hanya setelah 3 detik? Ini segera berubah.

Tujuan utama saya di sini adalah mengubah status setiap 3 detik (dengan setInterval()), tetapi karena tidak berhasil, saya mencoba setTimeout(), yang juga tidak berfungsi. Ada lampu di sini? Terima kasih!

Melakukan

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

Jika tidak, Anda meneruskan hasil dari setStateke setTimeout.

Anda juga dapat menggunakan fungsi panah ES6 untuk menghindari penggunaan thiskata kunci:

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

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

Di atas juga akan berfungsi karena fungsi panah ES6 tidak mengubah konteks this.

Setiap kali kita membuat waktu tunggu, kita harus menghapusnya di componentWillUnmount, jika belum diaktifkan.

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

Saya tahu ini agak lama, tetapi penting untuk diperhatikan bahwa React merekomendasikan untuk menghapus interval ketika komponen dilepas: https://reactjs.org/docs/state-and-lifecycle.html

Jadi saya ingin menambahkan jawaban ini ke diskusi ini:

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

setStatesedang dipanggil segera karena tanda kurung! Bungkus dalam fungsi anonim, lalu panggil:

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

Anda tidak memberi tahu siapa yang menelepon setTimeout

Di sini cara Anda memanggil waktu tunggu tanpa memanggil fungsi tambahan.

1. Anda dapat melakukan ini tanpa membuat fungsi tambahan.

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

Menggunakan function.prototype.bind ()

setTimeout mengambil lokasi fungsi dan menyimpannya dalam konteks.

2. Cara lain untuk melakukan hal yang sama bahkan dengan menulis lebih sedikit kode.

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

Mungkin menggunakan metode mengikat yang sama di beberapa titik

SetTimeout hanya mengambil lokasi fungsi dan fungsi tersebut sudah memiliki konteks? Bagaimanapun, itu berhasil!

CATATAN: Ini bekerja dengan fungsi apa pun yang Anda gunakan di js.

Cakupan kode Anda ( this) akan menjadi windowobjek Anda , bukan komponen react Anda, dan itulah sebabnya setTimeout(this.setState({position: 1}), 3000)akan crash seperti ini.

Itu berasal dari javascript bukan React, itu adalah js closure

Jadi, untuk mengikat ruang lingkup komponen reaksi Anda saat ini, lakukan ini:

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

Atau jika browser Anda mendukung es6 atau projs Anda memiliki dukungan untuk mengkompilasi es6 ke es5, coba fungsi panah juga, karena fungsi panah untuk memperbaiki masalah 'ini':

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

Ada 3 cara untuk mengakses cakupan di dalam fungsi 'setTimeout'

Pertama,

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

Kedua adalah menggunakan fungsi panah ES6, karena fungsi panah tidak memiliki ruang lingkup sendiri (ini)

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

Yang ketiga adalah mengikat ruang lingkup di dalam fungsi

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

Anda melakukan kesalahan deklarasi sintaks, gunakan deklarasi setTimeout yang tepat

message:() => { 
  setTimeout(() => {this.setState({opened:false})},3000); 
  return 'Thanks for your time, have a nice day 😊! 
}