React useState状态未定义报错求助：Checkbox状态处理问题

你的代码存在两个核心问题，导致了「变量未定义」的错误，同时Checkbox的状态绑定逻辑也不符合组件规范，以下是具体修复步骤：

1. 修复handleChange中的变量未定义错误 #

你在条件判断里写了key === venous，但这里的venous是未声明的变量，正确的写法应该是和字符串"venous"做比较。不过更高效的方式是直接利用计算属性名简化逻辑，完全不需要一堆if-else判断：

const [indication, setIndication] = React.useState({
  venous: false,
  flutter: false,
  heartValve: false,
  peripheral: false,
  antibody: false,
  other: false,
});

const handleChange = (event) => {
  // Checkbox的状态用checked获取，不是value
  const { name: key, checked } = event.target;
  // 使用函数式更新确保获取最新的状态值
  setIndication(prevState => ({
    ...prevState,
    [key]: checked
  }));
};

2. 修正Checkbox的状态绑定 #

Checkbox组件的选中状态需要用checked属性绑定，而不是value，同时初始值应该设为布尔值（对应勾选/未勾选），而非空字符串：

<FormGroup>
  <FormControlLabel
    checked={indication.venous}
    name="venous"
    onChange={handleChange}
    control={<Checkbox />}
    label={
      <Typography fontSize={20}>
        Venous Thromboembolism (VTE)
      </Typography>
    }
    labelPlacement="start"
  />
</FormGroup>

关键说明 #

• 用布尔值存储Checkbox的状态更符合语义，也能和组件的checked属性对应
• 函数式更新setIndication(prev => ...)可以避免因状态异步更新导致的旧值引用问题
• 计算属性[key]可以让同一个handleChange处理所有Checkbox的状态更新，无需为每个属性单独写判断

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