Pourquoi le nombre n'augmente-t-il pas comme prévu, mais augmente-t-il de 2 au lieu de 1 ?

Question

J'ai le code suivant dans React :

let guest = 0;

fonctionCoupe() {
  invité = invité + 1 ;
  retourner la tasse de thé <h2>{invité}</h2>;
}

exporter la fonction par défaut TeaSet() {
  retour (
    ≪>
      <Tasse />
      <Tasse />
      <Tasse />
    ≪/>
  );
}</pré>
<p>Le résultat souhaité est :</p>
<pre class="lang-none Prettyprint-override"><code>La tasse de thé du premier invité
Tasse de thé pour le 2ème invité
La tasse de thé du troisième invité
</code>

Cependant, le résultat réel renvoyé est :

La tasse de thé du deuxième invité,
La tasse de thé du quatrième invité,
La tasse à thé du 6ème invité

Pourquoi l'incrément de guest est-il de 2 au lieu de 1 comme je l'ai spécifié ?

Answer 1

Les variables d'état globales ne constituent peut-être pas un moyen viable d'atteindre cet objectif.

Sur la base de ce que vous avez mentionné dans votre question, vous pourriez essayer de réussir param作为count.

import { useEffect } from "react";

const  Cup  = ({guestCount}) => {
    return 
为第{guestCount}位客人准备的茶杯
;
}

export default function TeaSet() {
  return (
    
    
    
    
    >
  );
}