Saya ingin memperbarui status dengan ketinggian jendela bagian dalam saat saya mengubah ukuran layar. Ketika saya mencatat ketinggian status dalam kait useEffect saya mendapatkan 0 setiap kali, ketika saya masuk ke dalam fungsi updateWindowDimensions, nilai ketinggian diperbarui seperti yang diharapkan.

Bagaimana saya bisa memperbarui status dengan nilai baru setiap kali?

const [height, setHeight] = useState(0);

const updateWindowDimensions = () => {
    const newHeight = window.innerHeight;
    setHeight(newHeight);
    console.log('updating height');   
};

 useEffect(() => {
     window.addEventListener('resize', updateWindowDimensions);
     console.log("give height", height);
 }, []);
2
Filth 11 Maret 2020, 21:33

1 menjawab

Jawaban Terbaik

useEffect Anda hanya dijalankan satu kali, ketika komponen dipasang (karena array kosong [] yang Anda berikan sebagai argumen kedua)

Jika Anda cukup login di luarnya, Anda akan melihat nilai status Anda diperbarui dengan benar

  const [height, setHeight] = useState(0);

  useEffect(() => {
    const updateWindowDimensions = () => {
      const newHeight = window.innerHeight;
      setHeight(newHeight);
      console.log("updating height");
    };

    window.addEventListener("resize", updateWindowDimensions);

    return () => window.removeEventListener("resize", updateWindowDimensions) 

  }, []);

  console.log("give height", height);

Anda juga harus memindahkan deklarasi fungsi itu di dalam useEffect sehingga tidak dideklarasikan ulang pada setiap render

3
Galupuf 12 Maret 2020, 18:44