使用Next.js和Mobx创建计数器遇无效Hook调用报错求助

开发者阿泽

2026-7-18

Next.js + Mobx 计数器报错解决方案

你遇到的「无效Hook调用」错误，核心原因是新版mobx-react（v7及以上）的observer装饰器仅支持函数组件。用它装饰类组件时，内部会触发Hook调用，违反了Hook只能在函数组件体内使用的规则，从而抛出报错。

下面提供两种可行的解决方法：

方案一：改用函数组件（推荐）

符合React和Mobx的现代开发实践，代码更简洁：

import React from "react";
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react";

const Counter = observer(() => {
  const store = makeAutoObservable({
    count: 0,
    increment: () => store.count++,
    decrement: () => store.count--
  });

  return (
    <div>
      {store.count}
      <button onClick={store.increment}>+1</button>
      <button onClick={store.decrement}>-1</button>
    </div>
  );
});

export default Counter;

方案二：兼容类组件

如果坚持使用类组件，需要从mobx-react的classic模块导入observer：

import React from "react";
import { observable } from "mobx";
import { observer } from "mobx-react/classic"; // 修改导入路径

@observer
class Counter extends React.Component {
  @observable count = 0;

  increment = () => this.count++;
  decrement = () => this.count--;

  render() {
    return (
      <div>
        {this.count}
        <button onClick={this.increment}>+1</button>
        <button onClick={this.decrement}>-1</button>
      </div>
    );
  }
}

export default Counter;