Comment empêcher la réinitialisation de l'état lors de l'appel du setter d'état dans une bibliothèque tierce

Question

J'essaie de convertir un composant de classe React en composant de fonction React.

Il existe une fonction onChange qui peut être appelée à la fois à l'intérieur et à l'extérieur du composant. Le hook useState obtient la valeur initiale lorsque la fonction du composant de fonction est appelée. Lorsque j'utilise l'ancienne méthode de composant de classe, tout fonctionne bien. Pourquoi cela se produit-il et comment y remédier ?

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

Le problème est que onChange 是一个过时的闭包。您需要做的是使 onChange ressemble à ceci :

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

Vous pouvez également mettre test 添加到 useEffect dans le tableau des dépendances, mais assurez-vous de le nettoyer. (Tu devrais le faire de toute façon, mais c'est plus important maintenant)

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

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

Techniquement, si vous utilisez cette dernière méthode, vous devez useCallback

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

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

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

L’avantage est que vous n’avez pas besoin de suivre la liste des dépendances de onChange 的依赖项。 onChange à différents endroits maintenant qu’elle est fermée.