Bagaimana untuk menghalang tetapan semula keadaan apabila memanggil penetap keadaan dalam pustaka pihak ke-3

Question

Saya cuba menukar komponen kelas React kepada komponen fungsi React.

Terdapat fungsi onChange yang boleh dipanggil dalam dan luar komponen. Cangkuk useState mendapat nilai awal apabila fungsi komponen fungsi dipanggil. Apabila saya menggunakan cara komponen kelas lama semuanya berfungsi dengan baik. Mengapa ini berlaku dan bagaimana untuk menyelesaikannya?

const MyInput = (props) => {
  const { someLib, ...otherProps } = props;
  const [test, setTest] = useState(1); // console show 1,2,3, etc
            
  useEffect(() => {
    someLib && someLib.addCallback(onChange);
  }, []);

  const onChange = (event) => { 
    setTest(test + 1) // this function can called inside MyInput, and from someLib, 
                      // when it called from someLib, 'test' is reset, but in class component everything good 
  }
}

Answer 1

Masalahnya onChange 是一个过时的闭包。您需要做的是使 onChange kelihatan seperti ini:

const onChange = (event) => {
    setTest(oldTest => oldTest +1)
}

Sebagai alternatif, anda boleh meletakkan test 添加到 useEffect dalam tatasusunan dependencies, tetapi pastikan untuk membersihkannya. (Anda sepatutnya melakukan ini, tetapi ia lebih penting sekarang)

useEffect(() => {
    someLib && someLib.addCallback(onChange);

    return () => {
        someLib.removeCallback(onChange);
    }
}, [someLib, test]);

Secara teknikal, jika anda melakukan kaedah yang terakhir, anda perlu useCallback

const onChange = useCallback((event) => {
    setTest(test + 1);
}, [test]);

useEffect(() => {
    someLib && someLib.addCallback(onChange);

    return () => {
        someLib.removeCallback(onChange);
    }
}, [someLib, onChange]);

Kelebihan ini ialah anda tidak perlu menjejaki senarai pergantungan onChange 的依赖项。 onChange di tempat yang berbeza sekarang setelah ia ditutup.