Bereaksi setState tidak memperbarui status

Jadi saya punya ini:

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 hanyalah sebuah larik angka, [1, 5, 9]misalnya this.state.dealersOverallTotal, tidak memberikan total yang benar, tetapi totalapakah? Saya bahkan melakukan penundaan waktu tunggu untuk melihat apakah ini menyelesaikan masalah. ada yang jelas atau haruskah saya memposting lebih banyak kode?

setState()biasanya asinkron, yang artinya pada saat Anda console.logmenyatakan statusnya, belum diperbarui. Coba masukkan log ke dalam callback setState()metode tersebut. Ini dijalankan setelah perubahan status selesai:

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

setState tidak sinkron. Anda dapat menggunakan metode callback untuk mendapatkan status diperbarui.

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

Menggunakan async / await

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

The setState()operasi asynchronous dan karenanya Anda console.log()akan dieksekusi sebelum setState()bermutasi nilai-nilai dan karenanya Anda melihat hasilnya.

Untuk mengatasinya, masukkan nilai dalam fungsi callback setState(), seperti:

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

Untuk pengait, Anda harus menggunakan useEffectpengait.

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

setFruit('Apple');

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

Setstate adalah asynchronous dalam bereaksi, jadi untuk melihat status yang diperbarui di konsol gunakan callback seperti yang ditunjukkan di bawah ini (Fungsi callback akan dijalankan setelah update setstate)

Metode di bawah ini "tidak disarankan" tetapi untuk pemahaman, jika Anda mengubah status secara langsung, Anda dapat melihat status yang diperbarui di baris berikutnya. Saya ulangi ini "tidak disarankan"

cukup tambahkan componentDidUpdate(){}metode dalam kode Anda, dan itu akan berhasil. Anda dapat memeriksa siklus hidup react native di sini:

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

Saya mengalami masalah saat menyetel status reaksi beberapa kali (selalu menggunakan status default). Mengikuti masalah react / github ini berhasil untuk saya

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

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

Saya memiliki situasi yang sama dengan beberapa kode yang berbelit-belit, dan tidak ada dari saran yang ada yang berhasil untuk saya.

Masalah saya adalah yang setStateterjadi dari fungsi panggilan balik, yang dikeluarkan oleh salah satu komponen. Dan kecurigaan saya adalah bahwa panggilan itu terjadi secara sinkron, yang mencegah setStatepengaturan status sama sekali.

Sederhananya saya punya sesuatu seperti ini:

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

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

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

Cara saya harus "memperbaiki" itu untuk dimasukkan doUpdate()ke dalam setTimeoutseperti ini:

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

Tidak ideal, tetapi sebaliknya itu akan menjadi refactoring yang signifikan.