React setState durumu güncellemiyor

Bu yüzden şuna sahibim:

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
  this.setState({dealersOverallTotal: total});
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total

newDealersDeckTotal sadece bir sayı dizisidir, [1, 5, 9]örneğin this.state.dealersOverallTotaldoğru toplamı vermez, ancak verir total? Bunun sorunu çözüp çözmediğini görmek için bir zaman aşımı gecikmesi bile koydum. açık mı yoksa daha fazla kod göndermeli miyim?

setState()genellikle eşzamansızdır; bu, sizin console.logdurumunuz sırasında henüz güncellenmediği anlamına gelir . Günlüğü setState()yöntemin geri aramasına eklemeyi deneyin . Durum değişikliği tamamlandıktan sonra yürütülür:

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
}); 

setState zaman uyumsuzdur. Güncel durumu almak için geri arama yöntemini kullanabilirsiniz.

changeHandler(event) {
    this.setState({ yourName: event.target.value }, () => 
    console.log(this.state.yourName));
 }

Async / await kullanma

async changeHandler(event) {
    await this.setState({ yourName: event.target.value });
    console.log(this.state.yourName);
}

setState()Operasyondur asenkron ve dolayısıyla sizin console.log()önce çalıştırılacaktır setState()mutasyon değerleri ve dolayısıyla sen sonucunu görmek.

Bunu çözmek için setState(), aşağıdaki gibi geri arama işlevindeki değeri kaydedin :

setTimeout(() => {
    this.setState({dealersOverallTotal: total},
    function(){
       console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
    });
}, 10)

useEffectKanca olması durumunda kanca kullanmalısınız .

const [fruit, setFruit] = useState('');

setFruit('Apple');

useEffect(() => {
  console.log('Fruit', fruit);
}, [fruit])

Setstate react'te asenkrondur, bu nedenle konsolda güncellenmiş durumu görmek için aşağıda gösterildiği gibi geri aramayı kullanın (Geri arama işlevi setstate güncellemesinden sonra çalıştırılır)

Aşağıdaki yöntem "önerilmez", ancak anlamak için, durumu doğrudan değiştirirseniz, bir sonraki satırda güncellenmiş durumu görebilirsiniz. Tekrar ediyorum, bunun "önerilmez"

sadece componentDidUpdate(){}kodunuza yöntem ekleyin ve işe yarayacaktır. React native'nin yaşam döngüsünü buradan kontrol edebilirsiniz:

https://images.app.goo.gl/BVRAi4ea2P4LchqJ8

Birden çok kez tepki durumunu ayarlarken bir sorun yaşadım (her zaman varsayılan durumu kullandı). Bu react / github sorununu takiben benim için çalıştı

const [state, setState] = useState({
  foo: "abc",
  bar: 123
});

// Do this!
setState(prevState => {
  return {
    ...prevState,
    foo: "def"
  };
});
setState(prevState => {
  return {
    ...prevState,
    bar: 456
  };
});

Bazı karmaşık kodlarla aynı duruma sahiptim ve mevcut önerilerden hiçbir şey benim için işe yaramadı.

Benim sorunum, setStatebileşenlerden biri tarafından verilen geri arama işlevinden kaynaklanıyordu. Ve şüphem, aramanın eşzamanlı olarak gerçekleşmesi ve bu da setStatedurumun ayarlanmasını tamamen engellemesi .

Basitçe şöyle bir şeye sahibim:

render() {
    <Control
        ref={_ => this.control = _}
        onChange={this.handleChange}
        onUpdated={this.handleUpdate} />
}

handleChange() {
    this.control.doUpdate();
}

handleUpdate() {
    this.setState({...});
}

Ben "düzeltme" zorunda yolu koymak oldu doUpdate()içine setTimeoutböyle:

handleChange() {
    setTimeout(() => { this.control.doUpdate(); }, 10);
}

İdeal değil, ancak aksi takdirde önemli bir yeniden düzenleme olur.