React使用useToggle Hook绑定按钮onClick报错及点击不生效问题咨询

1. 自定义Hook类型推断错误：你的useToggle没有显式声明返回值类型，TypeScript默认会将其返回值推断为Array<boolean | () => void>（联合类型数组），而非固定顺序的[boolean, () => void]元组类型。所以TS无法确定你解构出来的setSidebarState一定是函数，会认为它有可能是布尔值，才会出现「false类型不能赋值给鼠标事件处理函数」的报错。
2. 修改后点击无响应的原因：你改成onClick={() => setSidebarState}时，箭头函数内部只是引用了setSidebarState这个变量，并没有执行这个toggle函数，所以点击后没有触发任何状态更新逻辑，自然不会生效。

• 第一步：给useToggle显式声明返回值的元组类型，固定返回值顺序和类型：

// 显式指定返回值为 [状态值, 切换函数] 元组
export const useToggle = (initialState = false): [boolean, () => void] => {
  const [state, setState] = useState(initialState);
  const toggle = useCallback(() => setState((state) => !state), []);
  return [state, toggle];
};

• 第二步：还原onClick绑定逻辑，不需要额外包裹无意义的箭头函数，直接绑定toggle函数即可：

<button onClick={setSidebarState}>{isOpened ? <OneIcon /> : <AnotherIcon />}</button>

如果你确实需要在点击时额外执行其他逻辑，要包裹箭头函数的话，记得主动调用toggle函数：

<button onClick={() => {
  // 可在这里加其他点击逻辑
  setSidebarState(); // 必须加括号执行函数
}}>{isOpened ? <OneIcon /> : <AnotherIcon />}</button>

修改后类型报错会消失，切换功能也可以正常运行。

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