Mengapakah Fungsi `this.setState` React Tidak Tersedia dalam Panggilan Balik ComponentDidMount?

"React this.setState is not a function" Isu: Pengikatan Kontekstual

Apabila cuba membangunkan aplikasi menggunakan API pihak ketiga , ralat biasa yang dihadapi ialah "TypeError: this.setState bukan fungsi." Ini timbul apabila cuba mengendalikan respons API. Masalahnya biasanya berpunca daripada pengikatan yang tidak betul.

Kod React yang disediakan mentakrifkan komponen yang dipanggil AppMain dengan kaedah componentDidMount. Dalam kaedah ini, panggilan API VK dibuat untuk mendapatkan maklumat pengguna. Dalam fungsi panggil balik respons API, percubaan dibuat untuk menggunakan this.setState untuk mengemas kini keadaan komponen. Walau bagaimanapun, ralat berlaku kerana fungsi panggil balik dilaksanakan dalam konteks yang berbeza dan tidak mempunyai akses kepada ini.setState.

Penyelesaian:

Untuk menyelesaikan isu ini, fungsi panggil balik mesti terikat pada konteks yang betul. Ini boleh dicapai dengan menggunakan kaedah .bind:

VK.api('users.get', { fields: 'photo_50' }, function(data) {
  if (data.response) {
    this.setState({ // the error happens here
      FirstName: data.response[0].first_name
    });
    console.info(this.state.FirstName);
  }
}.bind(this));

Dengan mengikat fungsi panggil balik pada contoh komponen, kata kunci ini dalam fungsi panggil balik akan merujuk kepada contoh komponen, membenarkan akses kepada kaedahnya dan hartanah, termasuk this.setState.

Pengikatan Tambahan:

Dalam sesetengah kes, pengikatan tambahan mungkin diperlukan. Contohnya, jika kaedah init VK juga dipanggil dalam componentDidMount, kaedah itu juga mesti terikat pada contoh komponen:

VK.init(function() {
  console.info("API initialisation successful");
  VK.api('users.get', { fields: 'photo_50' }, function(data) {
    if (data.response) {
      this.setState({ // the error happens here
        FirstName: data.response[0].first_name
      });
      console.info(this.state.FirstName);
    }
  }.bind(this));
}.bind(this), function() {
  console.info("API initialisation failed");
}, '5.34');

Atas ialah kandungan terperinci Mengapakah Fungsi `this.setState` React Tidak Tersedia dalam Panggilan Balik ComponentDidMount?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!