React中变量guest自增2而非指定1的原因排查

为什么guest每次自增2？ #

这是**开发环境下React严格模式（Strict Mode）**的特性导致的：

• React在开发模式中，为了检测组件中的潜在副作用（比如不合理的全局变量修改），会自动将组件函数调用两次。
• 你的guest是全局变量，每调用一次Cup组件它就会自增1。现在每个Cup被调用两次，最终就出现了编号为2、4、6的结果。

正确的写法 #

不要用全局变量管理组件状态，React提供了专门的状态管理工具来处理这类场景，比如useState钩子，或者通过props传递固定编号。

方案1：直接渲染固定数量的杯子（适合数量固定的场景） #

export default function TeaSet() {
  return (
    <>
      {[1, 2, 3].map(num => (
        <h2 key={num}>Tea cup for guest #{num}</h2>
      ))}
    </>
  );
}

方案2：用useState管理动态数量的杯子（适合数量可能变化的场景） #

import { useState } from 'react';

// 子组件接收编号作为props
function Cup({ guestNum }) {
  return <h2>Tea cup for guest #{guestNum}</h2>;
}

export default function TeaSet() {
  // 可以动态调整杯子数量
  const [cupCount, setCupCount] = useState(3);
  
  return (
    <>
      {Array.from({ length: cupCount }, (_, index) => (
        <Cup key={index} guestNum={index + 1} />
      ))}
    </>
  );
}

总结 #

全局变量不适合在React组件中追踪状态，因为React无法控制全局变量的修改逻辑，再加上开发模式下Strict Mode的二次调用，很容易出现不符合预期的结果。始终使用React提供的状态管理工具（如useState）或props传递数据，才能让组件的渲染和更新符合预期。

内容的提问来源于stack exchange，提问作者hatake