useState未被作为函数调用问题求助：导入后仍无法正常调用

排查步骤及解决方案 #

• 确认导入语法正确性
  对于React项目，正确的导入方式是：

  import { useState } from 'react';
  

  若是React Native项目，Hooks同样从react包导入，不要错误地从react-native导入。

• 检查useState调用位置
  Hooks必须遵循规则：只能在函数组件的顶层或自定义Hook的顶层调用，不能在条件判断、循环、嵌套函数或异步操作内调用。
  错误示例：

  function MyComponent() {
    if (true) {
      // 违反Hook规则：不能在条件块内调用
      const [count, setCount] = useState(0);
    }
    return <div>{count}</div>;
  }
  

  正确示例：

  function MyComponent() {
    // 合规：在组件顶层调用
    const [count, setCount] = useState(0);
    return <div>{count}</div>;
  }
  

• 验证React版本兼容性
  useState是React 16.8及以上版本才支持的特性，若使用旧版本需升级：

  # npm升级
  npm install react@latest react-dom@latest
  # yarn升级
  yarn add react@latest react-dom@latest
  

  若在CodeHS沙箱中，可查看依赖设置，确认React版本是否符合要求，必要时手动升级。

• 检查沙箱环境配置
  确认CodeHS沙箱已启用JSX编译和React Hooks支持，若有Babel配置选项，需确保@babel/preset-react预设已添加并正确配置。

• 排查代码冲突问题
  检查是否存在变量名冲突（比如自定义了同名的useState函数），或组件是否被错误定义为类组件（类组件不支持Hooks，需改为函数组件）。

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