Saya tidak mengerti perbedaan sintaks antara javascript Vanilla dan ES6 dalam Aplikasi Bereaksi. Kode pertama saya yang tidak berfungsi adalah

class App extends Component{
constructor(props){
super(props);

this.state = {videos:[]};

YTSearch({key: API_KEY,term :'surfboards'},function(videos){
  this.setState({videos : videos});
});
}

Ini memberikan kesalahan 'Tidak dapat membaca properti 'setState' dari tidak terdefinisi' di konsol

Tetapi mengubah sintaks menjadi

YTSearch({key: API_KEY,term :'surfboards'},(videos)=>{
   this.setState({videos : videos});
});

Memperbaiki masalah. Bukankah keduanya sama (saya mungkin salah). Menggunakan

function(videos){}

Dan

(videos) => {}

Saya tidak nyaman dengan javascript sehingga bantuan apa pun dihargai.

1
Buttersnips 16 Agustus 2017, 23:35

2 jawaban

Jawaban Terbaik

Hal ini disebabkan bagaimana this terikat.

Saat menggunakan fungsi panah this masih terikat ke kelas App Anda.

Namun, ketika Anda menggunakan function kata kunci this terikat pada fungsi tersebut.

Sesuai MDN

Sampai fungsi panah, setiap fungsi baru mendefinisikan sendiri nilai ini.

Dengan menggunakan kata kunci function, Anda dapat mengambil dua pendekatan.

Pertama,

YTSearch({key: API_KEY,term :'surfboards'}, function(videos){
  this.setState({
      videos : videos
   });
}.bind(this));

Atau Anda bisa melakukan:

//assign this to new variable that to use when setting state
let that = this;

YTSearch({key: API_KEY,term :'surfboards'}, function(videos){
  that.setState({
      videos : videos
   });
});
5
Paul Fitzgerald 16 Agustus 2017, 20:45

ini mengacu pada fungsi. Saya sarankan menggunakan fungsi panah ES6:

class App extends Component{
  constructor(props){
    super(props);

    this.state = {videos:[]};

    YTSearch({key: API_KEY,term :'surfboards'}, (videos) => {
      this.setState({videos : videos});
    });
  }
}

Karena fungsi panah tidak membuat ini sendiri, nilai ini dari konteks eksekusi terlampir digunakan. Anda juga dapat menyimpan referensi ke ini dalam variabel (atau fungsi ikat):

class App extends Component{
  constructor(props){
    super(props);

    var _this = this;

    this.state = {videos:[]};

    YTSearch({key: API_KEY,term :'surfboards'}, function(videos){
      _this.setState({videos : videos});
    });
  }
}
2
Artur 16 Agustus 2017, 20:43