Je pratique réagissant en utilisant des crochets et un contexte, en travaillant sur une application simple quiz. Le score devrait augmenter jusqu'à 1 lorsque la réponse est correcte.
const { qa, questionNumber } = useContext(GlobalContext);
const [score, setScore] = useState(0);
const answerOnClick = (e) => {
const correct = qa[questionNumber].correct_answer === e ? true : false;
if (correct) {
setScore(() => score++);
}
};
3 Réponses :
Vous militaient l'état lorsque vous faites https://reactjs.org/docs/react-component.html#setstetate
Pensez à la SSTATE () comme demande plutôt qu'une commande immédiate pour mettre à jour le composant. Pour une meilleure performance perçue, réagir peut le retarder, puis mettre à jour plusieurs composants en une seule passe. Réagir ne garantit pas que les changements d'état sont appliqués immédiatement.
Score ++ . Vous ne devriez pas muté l'état dans réagir car SetNum est asynchi.
Bien que cela soit vrai que nous ne devions pas mutair l'état, ce n'est pas ce que l'OP rencontre. Il vient d'essayer d'assigner à une valeur const , qui jette un typeError .
Le problème est que Le score est défini comme constant. Cela signifie que cela ne devrait pas être réaffecté. Lorsque vous utilisez Score ++ , vous le réaffectez comme suit Score = Score + 1 mais comme une main courte. Votre interpréteur JavaScript n'aime pas que vous réaffectez une variable que vous avez définie comme étant constante. Par conséquent, vous obtenez l'erreur.
USESTE Hook fournit une fonction de mise à jour (dans votre cas SetScore ) que vous devez utiliser pour mettre à jour l'état. Vous ne modifiez pas directement la valeur du score . Vous dites à réagir à initialiser le score avec une valeur supérieure sur prochain rendu suivant . La fonction de vos composants est à nouveau appelée avec une nouvelle déclaration de score , cette fois avec une valeur supérieure. Comme vous l'avez signalé correctement SETSCORE (() => Score + 1) fonctionne, cependant, SETSCORE (score + 1) devrait fonctionner aussi.
Score ++ / ++ score Mutait l'état. La meilleure façon de mettre à jour l'état basé sur l'état précédent est la méthode:
Est-ce que cela répond à votre question?
Lecture supplémentaire qui pourrait aider: Pourquoi ne puis-je pas modifier directement l'état du composant, vraiment?
Je viens de rappeler que
score ++ est équivalent àscore + = 1 , passcore + 1 etscore ne doit pas être réaffecté. Merci pour les liens utiles, @emileberon.