React+TypeScript中点击按钮触发无效Hook调用问题排查

结合你的场景，移除Hook后按钮功能正常，说明问题出在Hook的使用违反了React的Hook规则，常见原因如下：

1. Hook未在组件顶层调用 #

React强制要求所有Hook必须在函数组件的最顶层执行，不能放在条件判断、循环、嵌套函数（比如按钮的点击事件回调）里。如果你的useState是写在onClick回调或其他嵌套逻辑中，就会触发这个错误。

错误示例：

const ShowDone = () => {
  const handleClick = () => {
    // 错误：Hook在嵌套函数内调用
    const [showDone, setShowDone] = useState(false);
    setShowDone(!showDone);
  };
  return <button onClick={handleClick}>已完成</button>;
};

正确写法：

const ShowDone = () => {
  // 正确：Hook放在组件顶层
  const [showDone, setShowDone] = useState(false);
  
  const handleClick = () => {
    setShowDone(!showDone);
  };
  return <button onClick={handleClick}>已完成</button>;
};

2. 组件未被当作React组件渲染 #

如果你的ShowDone被当作普通函数直接调用（而非JSX标签），React无法识别这是一个组件，Hook调用就会失效。

错误示例：

const App = () => {
  // 错误：直接调用函数，不是React组件渲染方式
  return <div>{ShowDone()}</div>;
};

正确写法：

const App = () => {
  // 正确：以JSX标签形式渲染组件
  return <div><ShowDone /></div>;
};

3. React版本不兼容或重复引入 #

如果项目中存在多个版本的React，或者使用的React版本低于16.8（Hook从16.8版本开始支持），也会触发该错误。可以检查package.json中的react和react-dom版本，确保两者都是16.8及以上，且没有重复安装。

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