React中useState Hook的正确使用位置及类组件报错问题

算力阿峰

2026-8-5

问题分析与解决方案

你遇到的错误核心原因是：React Hooks（包括useState）只能在函数组件或自定义Hook的顶层作用域中使用，绝对不能在类组件的类体里直接声明，这是React Hook的硬性规则，违反规则就会触发编译报错。

解决方案一：将类组件改为函数组件

这是最直接适配useState的方式，把类组件重构为函数组件后，就能正常使用useState Hook：

function VoiceCallComponent() {
  const [val, setVal] = React.useState(7);
  
  // 这里编写组件的业务逻辑
  // 比如更新val的方法：const handleUpdate = () => setVal(prev => prev + 1);
  
  return (
    <div>当前值：{val}</div>
  );
}

解决方案二：保留类组件，使用类组件的state机制

如果不想重构组件，可以用类组件原生的state管理方式替代useState：

方式1：通过constructor初始化state

class VoiceCallComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { val: 7 };
  }

  // 更新state的方法
  updateValue = (newVal) => {
    this.setState({ val: newVal });
  }

  render() {
    return (
      <div>
        当前值：{this.state.val}
        <button onClick={() => this.updateValue(this.state.val + 1)}>加1</button>
      </div>
    );
  }
}

方式2：使用类字段语法（无需constructor）

class VoiceCallComponent extends React.Component {
  // 直接声明state字段
  state = { val: 7 };

  updateValue = (newVal) => {
    this.setState({ val: newVal });
  }

  render() {
    return (
      <div>当前值：{this.state.val}</div>
    );
  }
}