So verhindern Sie das Zurücksetzen des Status beim Aufrufen des Statussetzers in einer Bibliothek eines Drittanbieters

Question

Ich versuche, eine React-Klassenkomponente in eine React-Funktionskomponente umzuwandeln.

Es gibt eine onChange Funktion, die sowohl innerhalb als auch außerhalb der Komponente aufgerufen werden kann. Der useState-Hook erhält den Anfangswert, wenn die Funktionskomponente function aufgerufen wird. Wenn ich die alte Klassenkomponentenmethode verwende, funktioniert alles einwandfrei. Warum passiert das und wie kann man es lösen?

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

问题是 onChange 是一个过时的闭包。您需要做的是使 onChange 看起来像这样：

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

或者，您可以将 test 添加到 useEffect 中的依赖项数组中，但请确保进行清理。 （无论如何你都应该这样做，但现在更重要）

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

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

从技术上讲，如果您正在执行后一种方法，您需要useCallback

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

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

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

这样做的好处是您不必在不同的地方跟踪 onChange 的依赖项。 onChange 的依赖项列表现已关闭。