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
}
}
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le problème est que
onChange是一个过时的闭包。您需要做的是使onChangeressemble à ceci :const onChange = (event) => { setTest(oldTest => oldTest +1) }Vous pouvez également mettre
test添加到useEffectdans 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
useCallbackconst 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.