web-dev-qa-db-fra.com

React Hook "useState" est appelé dans la fonction "setResults" qui n'est ni un composant de fonction React ou une fonction personnalisée React Fonction crochet

J'essaie de faire un appel API dans un composant fonctionnel qui est un crochet réactif et basé sur le résultat, restitue le contenu du composant. Voici le code:

Composant qui appelle l'API-

function IntegrationDownshift() {
    render(
        <Paper square>
            {setResults(inputValue).map(
                (suggestion, index) =>
                    renderSuggestion({
                        suggestion,
                        index,
                        itemProps: getItemProps({
                            item:
                                suggestion.userFullName
                        }),
                        highlightedIndex,
                        selectedItem
                    })
            )}
        </Paper>
    );
}

Voici la fonction setResults:

function setResults(textInput) {
    const [data, setData] = useState({ users: [] });
    searchUser(textInput).then(result => {
        useEffect(() => {
            searchUser(textInput).then(result => {
                setData(result.users);
            });
        }, []);
    });
}

J'essaie d'obtenir les données de l'État et de restituer mon composant en fonction des données. Ici searchUser est dans l'action qui appelle l'API externe.

  1. searchUser appelle l'action et récupère les données avec succès, mais je ne sais pas pourquoi l'état est mis à jour - j'ai l'erreur ci-dessous -

React Hook "useState" est appelé dans la fonction "setResults" qui n'est ni un composant de fonction React ou une fonction React Hook function react-hooks/rules-of - crochets

  1. En tant que deuxième alternative, j'essaie de renvoyer les valeurs de searchUser et d'y accéder dans la fonction ci-dessous, toujours, pas d'utilisation

Je suis nouveau sur les crochets et toute aide/pointeur sera utile.

javascriptreactjsreact-hooksuse-effect
4
beta programmers

Les noms des composants fonctionnels React doivent commencer par la lettre majuscule. Si vous menipulez le setResults en SetResults, alors cela fonctionnera.

Et Hooks ne prend pas en charge dans les classes javascript régulières, essayez donc de créer un autre composant avec le nom de SetResults. Et l'inclure dans le composant principal

1
hanuman kumar

En fait, le setResults doit être capitalisé comme tel

 function SetResults(){...} // S capitalized here

Remarque: Si vous n'utilisez pas de hooks de réaction, vous n'avez pas besoin de mettre en majuscule la première lettre du nom de la fonction, mais l'utilisation de hooks s'attend à ce que la première lettre de votre fonction soit en majuscule.

Une question similaire est discutée ici,

React Hook "useState" est appelé dans la fonction "app" qui n'est ni un composant de fonction React ou une fonction personnalisée React Hook function

1
Sandeep Amarnath

Les hooks vous permettent essentiellement d'utiliser l'état et d'autres fonctionnalités des composants de classe React dans les composants de fonction. Donc, appeler des hooks dans une fonction JavaScript normale n'est pas autorisé. Vous ne pouvez le faire qu'au niveau supérieur des composants de fonction. ou à vos crochets personnalisés.

Pensez à des crochets comme ceci:

  • useState est similaire à this.setState dans les composants de classe.
  • useEffect est similaire à componentDidMount et componentDidUpdate dans les composants de classe.

React docs a une section expliquant les règles d'utilisation des hooks:

https://reactjs.org/docs/hooks-rules.html

0
João Paulo de Farias