Mengapa bilangannya tidak berkembang seperti yang saya jangkakan, tetapi meningkat sebanyak 2 dan bukannya 1?

Question

Saya mempunyai kod berikut dalam React:

biarkan tetamu = 0;

functionCup() {
  tetamu = tetamu + 1;
  kembalikan <h2>{tetamu}'s teacup</h2>;
}

eksport fungsi lalai TeaSet() {
  kembali (
    <>
      <Piala />
      <Piala />
      <Piala />
    </>
  );
}

Hasil yang saya inginkan ialah:

<code>Cawan teh tetamu pertama
Cawan teh untuk tetamu ke-2
Cawan teh tetamu ketiga
</code>

Walau bagaimanapun, hasil sebenar yang dikembalikan ialah:

Cawan teh tetamu kedua,
Cawan teh tetamu keempat,
Cawan teh tetamu ke-6

Mengapa kenaikan tetamu 2 dan bukannya 1 seperti yang saya nyatakan?

Answer 1

Pembolehubah keadaan global mungkin bukan cara yang berdaya maju untuk mencapai matlamat ini.

Berdasarkan apa yang anda nyatakan dalam soalan anda, anda boleh cuba luluskan param作为count.

import { useEffect } from "react";

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

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