为什么数字的增长不符合我的预期，而是增加了2而不是1？

Question

我在React中有以下代码：

let guest = 0;

function Cup() {
  guest = guest + 1;
  return <h2>第{guest}位客人的茶杯</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

我期望的结果是：

<code>第1位客人的茶杯
第2位客人的茶杯
第3位客人的茶杯
</code>

然而，实际返回的结果是：

第2位客人的茶杯，
第4位客人的茶杯，
第6位客人的茶杯

为什么guest的增量是2，而不是我指定的1？

Answer 1

全局状态变量可能不是实现这一目标的可行方法。

根据你在问题中提到的问题，你可以尝试将param作为count传递。

import { useEffect } from "react";

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

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