Durum ayarlandığında olay

Question

React the this.setState yöntemi durumu ayarlar. Mesela ben name için Thomas için durumu ayarladım.

this.setState({'name': 'Thomas'}) 

Başka bir nesneye ihtiyacım var. Diğer devlet özelliklerinden oluşan bir devlet mülkü. Mesela aşağıda.

let name = 'Thomas' 
this.setState({name}) 

console.log(this.state.data) // => undefined 

let age = '26' 
let data = {age} 
this.setState(data) 

console.log(this.state.data) {data: {age: '26'}} 

this.stateChanged(state => { 
    let data = state.data || {} 
    if (state.name) data.name = state.name 
    this.setState({data}) 
}) 

this.setState({name}) 

console.log(this.state.data) // => {data: {age: '26', name: 'Thomas'}} 

Tepki herhangi eşdeğer this.stateChanged yöntem var mı?

Answer 1

React, durumun değiştiğini veya bileşeninin ne zaman güncellendiğini belirlemek için bize birkaç açık seçenek sunar. Üçüncü seçenek size bu durumun örtük bir yaklaşımın daha olma:

1. setState(function|object nextState, [function callback]) sağlanan geri arama kullanın: documentation Başına

   onClick(e) { 
       this.setState({ 
        foobar: e.target.value 
       }, this.doAfter) 
   } 
   doAfter() { 
       console.log(`Just set FOOBAR to ${this.state.foobar}`) 
   } 
   

   , biz sonra çağırılacak bu yöntem güvenebilirsiniz Durum eşzamansız olarak ayarlandı. bileşeni böylece en son durum değişiklikleri erişebilir garanti kendisini kılmış sonra documentation Başına

   componentDidUpdate() { 
       console.log(`Component updated: Foobar is ${this.state.foobar}`) 
   } 
   

   bu işlev derhal çağrılır:

2. componentDidUpdate yaşam döngüsü yöntemi kullanın.

3. render() yöntemindeki tüm gerekli state bilgilerini derleyin.

   render() { 
       const compilation = {foobar: `${this.state.foobar}-bar`} 
       return (
        <div>...</div> 
       ) 
   } 
   

   Temelde, sadece bununla yukarıdaki ilk iki seçenek ihtiyaçlarınız için daha iyi yeterli olabilir, render() bir JSX nesnesi dönmeden önce seveceğini nasıl nesneyi oluşturur.

Örnek

http://codepen.io/mikechabot/pen/KzyVVw?editors=0011