Ulangi penggunaanKesan nama dalam tatasusunan

Question

Saya menjumpai latihan ini di tapak web ini. Saya sedang menguji ini kerana saya juga sedang mempelajari mata kail dalam React.

Saya tidak faham mengapa pelaksanaan useEffect berhenti apabila anda memasukkan nama yang sama seperti yang sudah ada dalam tatasusunan.

Bukankah ia patut melangkau nama pendua dan beralih ke nama seterusnya? Atau adakah saya melakukan sesuatu yang salah?

let pengguna = ['Oliver', 'Thomas', 'George', 'George', 'William']
eksport fungsi lalai App() {
  const [indeks, setIndex] = useState(0);
  console.log('RENDER');
  useEffect(() => {
    setTimeout(() => setIndex(index => indeks + 1), 1000)
    console.log('Hello ' + pengguna[indeks]);
    console.log('Kesan Sampingan BERJALAN!');
    if (index === users.length - 1) {
      kembali
    }
  }, [pengguna[indeks]])
}

Answer 1

Kesan sampingan dalam gelung: Cara anda menggunakan setTimeout dan setIndex dalam useEffect boleh menyebabkan tingkah laku yang tidak dijangka. useEffect dilaksanakan selepas setiap pemaparan, dan menggunakan keadaan indeks secara langsung dalam panggilan balik setTimeout boleh menyebabkan masalah kerana penutupan menangkap nilai keadaan apabila panggilan balik dibuat.

Mengakses elemen tatasusunan: Anda cuba mengakses elemen tatasusunan pengguna menggunakan indeks, tetapi disebabkan sifat useEffect dan kelewatan tak segerak, ia mungkin melebihi skop tatasusunan.

const [index, setIndex] = useState(0);

  useEffect(() => {
    console.log('RENDER');
    console.log('副作用运行！');
    
    if (index >= users.length) {
      return;
    }

    const timeoutId = setTimeout(() => {
      console.log('你好 ' + users[index]);
      setIndex(index + 1);
    }, 1000);

    return () => clearTimeout (timeoutId);
  }, [index]);