J'essaye de créer un Hook personnalisé qui me permet de passer une valeur et de soustraire 1 chaque fois que j'appuie sur un bouton. J'obtiens actuellement le message d'erreur
React Hook "useLastPage" est appelé dans la fonction "handleLastPage" qui n'est ni un composant de fonction React ni une fonction React Hook personnalisée
dans le code suivant:
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
Mon code reflète étroitement l'exemple de hook personnalisé de React Doc, donc je ne sais pas comment appeler useLastPage dans mon Hook personnalisé. Voici l'exemple du React's Doc : p>
function usePrevPage (page) {
const [lastPage, useLastPage] = useState(page)
useEffect(() => {
function handleLastPage(page) {
useLastPage(page - 1)
}
handleLastPage()
})
return lastPage
}
3 Réponses :
Je pense que votre principal problème est que vous appelez votre fonction set useLastPage - Le linter React recherche les fonctions qui commencent par le mot use et essaie de 'lint 'eux comme des crochets. Dans ce cas, useLastPage n'est pas un hook, c'est le setter renvoyé par useState . Je soupçonne que si vous l'appelez setLastPage , cela effacera le message d'erreur pour vous.
React est confus car vous utilisez useLastPage pour le programme de mise à jour de const [lastPage, useLastPage] = useState (page) .
Essayez de changer useLastPage en setLastPage . Vous devez utiliser le préfixe use pour les hooks.
Découvrez la démo - https://codesandbox.io/s/crazy-neumann- vraiment
Merci pour la démo. Comment invoquer usePrevPage en appuyant sur un bouton? Je continue à recevoir "Appel de hook non valide. Les hooks ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction", peu importe d'où je l'appelle.
@Kevvv Dans ce cas, le hook semble inutile car useEffect est pour le cycle de vie pendant que vous voulez gérer un événement, (le hook de cycle de vie n'est pas invoqué). Vous pouvez simplement gérer l'événement de clic dans "App" en utilisant useState comme je l'ai fait dans cette démo codesandbox.io/s/zen-proskuriakova-dxc98
useEffect est similaire à componentDidMount et componentDidUpdate . Il fonctionnera lorsque le Composant sera monté / mis à jour . Pour diminuer la valeur de l'état lastPage , vous pouvez simplement appeler son setter directement dans le callback useState. Je suggère également de changer le préfixe du setter en set au lieu de use
function usePrevPage (page) {
const [lastPage, setLastPage] = useState(page);
useEffect(() => {
setLastPage(page-1);
});
return lastPage;
}
Si vous voulez changer la valeur sur le bouton cliquez alors vous avez besoin pour écrire le gestionnaire en dehors de useEffect et le définir sur la propriété onClick du bouton.
Le message d'erreur indique que useEffect ne doit rien renvoyer. Aussi, pourriez-vous expliquer comment avoir le gestionnaire en dehors de useEffect?
Désolé, le retour devrait concerner votre crochet personnalisé. Pas le useEffect.
Ah ok. En outre, l'une des règles d'utilisation des Hooks est "Ne pas appeler de gestionnaires d'événements". Comment utiliser le Hook défini ci-dessus pour être déclenché par un bouton?
Comme il s'agit d'un crochet personnalisé que vous avez fabriqué ici. Vous pouvez l'utiliser n'importe où dans votre application react. Votre hook personnalisé agira essentiellement comme une fonction qui prendra une valeur et la renverra après la décrémentation de 1.