Comment recharger une page (état) dans une application réagir
Je commence à apprendre react.js et j'ai développeur d'une simple roche-papier-ciseaux jeu dans une réagir app. Je suis la recherche un peu difficile de créer un bouton de rechargement, car il est bien sûr différent du bouton javascript avec une fonction comme:
<button onclick="reload">RESTART GAME</button>
function reload() {
location.reload();
}
Pour cette réagissent application ce que j'ai pensé de travail a été:
<button type="button" onClick={ refreshPage }> <span>Reload</span> </button>
function refreshPage(){
window.location.reload();
}
à l'App.js fichier mais je reçois le message d'erreur:
./src/App.js
Syntax error: Unexpected token (64:11)
62 | }
63 |
> 64 | function refreshPage(){
| ^
65 | window.location.reload();
66 | }
67 | }
Le projet complet peut être trouvé ici github (mnp de démarrage vous permettra de lancer le projet dans le terminal/console)
Tout aperçu de la façon de corriger ce serait très apprécié, merci!!!!
- est code à l'intérieur du composant?
Vous devez vous connecter pour publier un commentaire.
À réagir vous n'avez pas à actualiser la page de réinitialisation de l'état. J'ai regardé votre projet et vu que vous tenez vos scores et vos données de jeu dans l'état du composant. Cela vous permet de réinitialiser le jeu facilement avec juste le retour aux valeurs initiales.
Par Exemple
N'oubliez pas de lier vos méthodes pour être en mesure d'utiliser
this
en eux. Pour plus d'informations à ce sujet vous pouvez lire réagir de la documentation pour La Gestion Des Événements.Vérifier l'extrait de code ci-dessous pour la solution de contournement pour l'actualisation d'une page afin de réinitialiser le jeu.
Mais ce n'est pas la meilleure pratique depuis Réagir en charge la modification de l'état (par défaut) la composante rendre à nouveau. Réagir a le concept de " Virtual DOM. de sorte que l'application va être assez rapide. Parce que Réagir permettra de mettre à jour le DOM en comparant diff.
Il est préférable de modifier l'état comme d'autres réponses suggérées.
this.setState({games:[]})
Ci-dessous l'extrait de code pour cette solution(l'actualisation d'une page)
JS:
HTML:
Il y a 2 façons de
Seconde a sa raison mais peu coûteuses ainsi.
voie 1 - se Référant à @bennygel réponse
chemin 2 : fait Référence à @dwij réponse
Ce que vous voulez vraiment est de rétablir l'état, de ne pas avoir à recharger la page.
En appelant
this.setState({ games: [] })
dans le gestionnaire de clicÀ en juger par le message d'erreur c'est une erreur de syntaxe, probablement une faute de frappe ou quelque chose comme ça
J'ai comme solution dans l'article avec le maintien de l'état précédent et de la fonction reset - https://medium.com/@justintulk/best-practices-for-resetting-an-es6-react-components-state-81c0c86df98d
Dans Le Constructeur:
et