essayer de réagir des crochets sur un composant de recherche simple. L'idée est simple: types d'utilisateurs symboles, chaque symbole typé initie la requête API.
Pour atteindre que j'ai usestate code> et USECALLBACK code> Crochets comme dans le code ci-dessous: onChange q
sendRequest
onChange qu
sendRequest q
onChange que
sendRequest qu
3 Réponses :
SetState est asynchrone! Au moment où vous envoyez SendRequest, l'état local n'est pas mis à jour, car il est asynchrone et il a besoin d'un peu de temps pour être défini.
Vous devez soit donner la chaîne en tant que paramètre dans la fonction ou l'utilisation de la requête. . p>
échange d'usecallback avec useeffect et supprimer l'appel à Onchange devrait fonctionner. P>
const Search = () => {
const [query, setQuery] = useState("");
useEffect(() => {
console.log('sendRequest ', query);
}, [query]);
return (
<div>
<input
type="text"
value={query}
placeholder="Search"
onChange={e => {
setQuery(e.target.value);
}}
/>
</div>
}
Utilisez useEffect à la place Usecallback. UseEffect déclenche votre fonction de rappel lorsque la requête change.
useeffect (() => {console.log (requête)}, [Query])
Est useEffect supposé être appelé à partir d'événements tels que Onchange ?
Hey Bro Vous pouvez essayer cette implémentation de ses travaux comme vous vous attendez à
const [query, setQuery] = useState("");
const sendRequest = e => {
setQuery(e);
console.log('sendRequest ', e);
};
return (
<div>
<input
type="text"
value={query}
placeholder="Search"
onChange={e => {
console.log('onChange ', e.target.value);
sendRequest(e.target.value);
}}
/>
</div>)