Saya memiliki fungsi sederhana:

const payForCheckedOrders = () => {await realizePayment()};

const Test = () => {
  const [counter, setCounter] = useState(0);
  const [counter2, setCounter2] = useState(0);

   console.log('render', counter, counter2);

    const realizePayment = async () => {
        for (let i = 0; i < 3; i++) {
          console.log('func start', counter, counter2);
          setCounter(counter + 1);
          setCounter2(prev => prev + 1);
          console.log('func end', counter, counter2);
         await sleep(500);
        }
    };
}

Fakta penting adalah ketika saya memanggil fungsi, hasilnya adalah:

berfungsi mulai 0 0

akhir fungsi 0 0

render 1 1

berfungsi mulai 0 0

render 1 1

render 1 2

akhir fungsi 0 0

berfungsi mulai 0 0

render 1 2

render 1 3

akhir fungsi 0 0

Pertanyaan saya adalah mengapa penghitung tidak memiliki nilai yang sama dengan penghitung2 di log konsol render.

Dan mengapa membaca status dari dalam fungsi, bahkan setelah mengubah status, log konsol menunjukkan nilai awal?

Saya pikir ini masalah async/menunggu, tetapi tidak. Saya telah melakukan sinkronisasi yang hampir sama dan hasilnya sama.

1
Artur 9 Agustus 2019, 19:50

1 menjawab

Jawaban Terbaik

Penting untuk diingat bahwa setiap kali komponen dirender, nilai counter dan counter2 saat ini dibaca, dan nilai ini tidak akan berubah hingga komponen dirender lagi. Jadi, pertama kali komponen dirender, counter dan counter2 akan menjadi 0.

Demikian pula, salinan baru realizePayment dibuat, yang menyimpan versi counter dan counter2 tertentu, melalui penutupan. Jadi versi render pertama dari realizePayment, counter dan counter2 juga masih 0, terlepas dari berapa kali dipanggil.

  1. Mengapa counter2 bertambah ketika counter tidak?

Karena counter disetel dengan setCounter(counter + 1) sedangkan counter2 disetel dengan setCounter2(prev => prev + 1): karena variabel counter tidak berubah, counter + 1 selalu sama, untuk versi realizePayment tertentu. Untuk versi render pertama, counter adalah 0, jadi ini melakukan setCounter(1) beberapa kali. (Karenanya mengapa selalu 1 di render berikutnya).

Di sisi lain versi prev => prev + 1 yang digunakan oleh setCounter2 membaca nilai saat ini, daripada mengandalkan variabel counter2, yang tidak berubah.

  1. Mengapa mereka mencatat hal yang sama di akhir fungsi seperti di awal?

Sekali lagi, tidak ada variabel yang pernah berubah untuk versi realizePayment tertentu, jadi mereka akan selalu mencatat nilai yang sama di akhir fungsi seperti di awal.

  1. Mengapa mereka selalu 0 di awal realizePayment bahkan setelah status diperbarui?

Kode contoh Anda sangat tidak jelas tentang bagaimana realizePayment dipanggil: seperti yang tertulis, ini bukan JS legal, Anda memanggil fungsi yang ditentukan di dalam komponen dari luar komponen.

Namun ingat bahwa setiap render komponen menghasilkan salinan baru dari fungsi realizePayment, dengan nilai spesifik untuk counter dan counter2. Berdasarkan log, Anda selalu memanggil versi realizePayment yang sama, versi dari render awal.

0
Retsam 9 Agustus 2019, 17:12