能否在onClick函数内用useState Hook？Checkbox点击报错排查

1. 能否在onClick函数内部使用useState Hook？ #

绝对不行哦！React Hooks有两条核心规则必须严格遵守：

• 只能在React函数组件的顶层调用Hook，不能嵌套在回调函数、条件判断、循环或者其他嵌套逻辑里
• 只能在React函数组件或者自定义Hook里调用Hook

之所以不能在onClick这类回调里用useState，是因为React依赖Hook的调用顺序来维护每个Hook对应的状态。如果在回调里调用，每次触发回调的时机不确定，会直接打乱Hook的调用顺序，导致状态错乱、出现各种难以排查的奇怪bug。

2. 关于复选框点击报错setChecked is not a function的问题 #

你的代码里藏了一个很容易踩的小坑：useState返回的是数组，不是对象！

看你写的这行代码：

const {checked, setChecked} = useState(false);

这里用了对象解构{}，但实际上useState(false)返回的是[false, 状态更新函数]这样的数组结构。用对象解构的话，相当于你在数组里找名为checked和setChecked的属性，显然是找不到的，所以setChecked会变成undefined，调用的时候自然就会报“不是函数”的错误。

修正后的代码应该改用数组解构：

const [checked, setChecked] = useState(false); 
<Form.Check 
  type="checkbox" 
  checked={checked} 
  onClick={(e)=>{ setChecked(!checked); }}
/>

这样就能正常获取到setChecked这个状态更新函数，点击复选框时状态也能正确切换了。另外提一句，对于表单元素（比如复选框），更推荐使用onChange事件而不是onClick，不过这不是导致报错的原因，只是一个优化小建议~

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