J'ai écrit un code JS réagit ici:
handleClick(prevState){
this.setState(prevState => return {count: prevState.count +1});
}
3 Réponses :
pense que vous manquez des supports supplémentaires:
prevState = function(){}
prevState = () => { }
prevState => { }
Pouvez-vous s'il vous plaît élaborer plus loin, je suis presque nouveau dans JS. Pourquoi dois-je envelopper cela avec {} et utiliser revenir après? Il n'y a pas besoin de retour s'il n'y a qu'une seule déclaration
L'alternative à cela consiste à envelopper la déclaration unique entre parenthèses. par exemple. Count => ({compte: prevstate.count +1}); JS pense que vos supports dans cette instance désignent le corps de la fonction, quand ils désignent réellement l'objet.
Voici votre code corrigé:
this.setState(prevState => ({ count: prevState.count + 1 }))
Il n'est pas nécessaire d'utiliser la prevste, cela devrait résoudre votre problème:
class App extends Component {
state = {
count: 0
};
handleClick = () => {
this.setState({
count: this.state.count + 1
})
};
render() {
const { count } = this.state;
return (
<div>
<h1>{count}</h1>
<button onClick={() => this.handleClick(this.state.count)}>Increment</button>
</div>
);
}
}
Supprimez le mot-clé renvoyer et mettez l'objet dans
() .this.setstate (prevstate => ({compte: prevstate.count +1}));Les fonctions de flèche d'une ligne ont leur déclaration de retour implicite. Vous retournez deux fois
this.setstate (prevstate => ({compte: prevstate.count +1}))Au lieu de "décrire" l'erreur avec "écrasé l'ensemble du programme" Vous devez ajouter des messages d'erreur du navigateur (et il y en aura certainement un)
Tout le monde vous a donné la réponse déjà, mais juste un peu de contexte: lorsque vous avez une fonction de flèche suivie des crochets,
(prevstate) => {} , il exécute tout ce qui est entre les crochets comme si c'est une Bloc de code normal dans une fonction normale, vous avez donc essentiellement écritfonction () {compte: prevstate.count +1} , qui n'a pas de sens (et je pense que c'est probablement une erreur de syntaxe) . D'autre part, une fonction de flèche suivie par, par exemple, un nombre ou une chaîne ou une variable, ou par parenthases, sans crochets, renvoie directement cette valeur, ou tout ce qui est à l'intérieur des entre ces terres.Merci @tkol, je n'ai pas compris la dernière phrase. Vous dites si les fonctions de flèche sont suivies de
() renvoie directement la valeur. Merci@Basirpayenda jsfiddle.net/3b1emc7q - fait cela pour illustrer
Mais oui, le format général de fonction
const x = () => (n); , où vous attribuez la fonction fléchée àx etn < / code> est essentiellement n'importe quoi, qu'il s'agisse d'une variable, d'un numéro, d'un objet, peu plus tard, lorsque vous appelez la fonctionx () , il retourneranMerci beaucoup, vous avez un esprit gentil