2017-01-14 28 views
11

Sadece React ve JavaScript öğrenmeye başladım.
Öğreticiden geçerken, bu örnekte bir geçiş düğmesi oluşturan bir bileşenin kodunu aldım.
Bu kod parçasıdır: beni buraya adamcağızReact setState + 'prevState' nereden geliyor?

class Toggle extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {isToggleOn: true}; 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     this.setState(prevState => ({ // prevState? 
      isToggleOn: !prevState.isToggleOn 
     })); 
    } 

2 nokta: prevState argüman geldi

  1. ?
    Aramadan önce var prevState = this.state; gibi bir şey göremiyorum ve yine de çalışıyor.
  2. Ok işlevinin sözdizimi: neden parantez okdan sonra?
    Neden her zamanki gibi arg => { statement; } sözdizimi çalışmıyor? acemi sorular için üzgünüm

...

+0

gibi bakmak gerekir, ancak böyle olarak kullanılabilir. 'prevState' sadece geri arama için bir parametredir, –

cevap

16
  1. prevState isteğe her ikisi de props ile birlikte React tarafından sağlanmaktadır.

  2. Parantez, parantez kullanmadıysanız return kullanılmaya zorlanacağınız birden fazla satıra izin verir. Tek bir çizgi kullanabilirsiniz ama kıvırcık parantezlere ihtiyacınız yoktur.

    • Güncelleme: Ben parantezi olması gerekir, belirli bir durum söylemeyi unutmuşum. return ifadesi olmadan bir nesneyi döndürüyorsanız, parantez içine sarmanız gerekir. Onu yakaladığın için teşekkürler. Yani () => {foo: true} bir işlev gibi görünüyor ve foo: true geçersiz bir satır olduğu için bir hata atacaktır. Bunu düzeltmek için onu bir tek satır ok fonksiyonu} {gerektirmez () => ({ foo: true })
+0

cevabında doğal olarak saklanır. Cevap 2. benim durumum için açıklamıyor. Eğer this.setState kullanırsam ( \t (prevState) => ({counter: prevState.counter + 1})); Hepsi bir satırda çalışır. AMA a) kaşlı ayraçlar olmadan, hata verecektir. ve b) standart parantez olmadan hata yok, ama hiç artmıyor. Bu yüzden benim için her iki parantezin de RHS üzerinde bu sözdiziminde olduğu gibi read.setState ((prevState) => ({key: value})); – joedotnot

+0

Haklısın, açıklamam gereken bir durum. Bir nesneyi döndürürken, 'return' ifadesine sahip değilseniz, parantez içine sarmanız gerekir. Cevabımı güncelleyeceğim. –

İlgili konular