存储整数值的React state的推荐默认值该如何选择

结论 #

推荐将selectedId的默认值设置为null，而非默认的undefined。

具体原因 #

• 语义更明确：undefined在JS中通常表示变量已声明但未被主动赋值，null则是开发者主动设置的、代表“空/无有效值”的业务状态。你的场景中“未选中任何项”是明确的业务状态，用null能让其他维护者一眼看懂这是主动设置的空值，而非代码疏漏导致的未赋值。
• 降低调试成本：如果用useState()不传参的默认undefined，后续调用setSelectedId()不传参也会赋值为undefined，此时如果出现逻辑疏漏（比如调用handleSelect时漏传id参数），错误产生的undefined和主动重置的空状态无法区分，排查bug难度更高。用null的话所有主动空状态都会是null，一旦出现undefined就能直接定位是代码赋值逻辑出错。
• 类型适配性更好：如果后续接入TypeScript，useState<number | null>(null)的类型定义非常清晰；如果用undefined还需要额外处理未初始化状态的类型判断，增加不必要的代码复杂度。
• 逻辑判断更灵活：常规真值判断if (selectedId)对null和undefined都生效，如果你后续需要严格区分“组件未初始化”和“用户主动取消选中”两种状态，只需要判断selectedId === null即可，不会和未初始化的undefined混淆。

调整后的代码示例 #

// 明确初始化值为null
const [selectedId, setSelectedId] = useState(null);

const handleSelect = id => {
  setIsAlertOpen(true);
  setSelectedId(id);
};

<Button onClick={() => {
  deleteItem(selectedId)
  // 明确重置为null
  setSelectedId(null);
}/>

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