使用 mobx 更改 @observable 属性不要在我的项目中重新渲染观察者组件

Question

我的项目中有 Mobx 问题。通过操作更改我商店中的属性不会触发重新渲染组件。我用 @observer 注释了 @action 字段，用 HoC observer.

注释了组件

我做了一个最小的设置来表示 StackBlizt 上的问题：https://stackblitz.com/edit/react-ts-dwqnm5?file=TestComponent.tsx

点击按钮后令牌应该改变。

Index.tsx

function App() {
  return (
    <StoreProvider store={new UserStore()}>
      <div>
        <h1>Hello REACT!</h1>
        <TestComponent />
      </div>
    </StoreProvider>
  );
}

render(<App />, document.getElementById("root"));

StoreContext.tsx

export const StoreContext = createContext<UserStore>({} as UserStore);

export type StoreComponent = FC<{
  store: UserStore;
  children: ReactNode;
}>;

export const StoreProvider: StoreComponent = ({
  children,
  store
}): ReactElement => {
  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
};

UserStore.ts

export default class UserStore {
  @observable
  public authToken: string = "null";

  @action
  changeAuth = (auth: string) => {
    this.authToken = auth;
  };
}

TestComponent.tsx

function TestComponent() {
  const { changeAuth, authToken } = useContext(StoreContext);

  const handleClick = () => {
    changeAuth("TEST AUTH");
  };

  return (
    <div>
      <button onClick={handleClick}>Click to change Token in store</button>
      <br />
      Token: {authToken}
      <br />
    </div>
  );
}

export default observer(TestComponent);

我没注意到什么？

Answer 1

如果您使用的是 MobX 6，那么您现在需要在构造函数中使用 makeObservable 方法来使用装饰器实现与之前 MobX 5 相同的功能：

import { makeObservable } from "mobx"

export default class UserStore {
  @observable
  public authToken: string = "null";

  @action
  changeAuth = (auth: string) => {
    this.authToken = auth;
  };

  constructor() {
    // Just call it here
    makeObservable(this);
  }
}

虽然有新的东西可能会让你完全放弃装饰器，makeAutoObservable:

import { makeAutoObservable } from "mobx"

export default class UserStore {
  // Don't need decorators now
  public authToken: string = "null";

  // Don't need decorators now
  changeAuth = (auth: string) => {
    this.authToken = auth;
  };

  constructor() {
    // Just call it here
    makeAutoObservable(this);
  }
}

这里有更多信息 https://mobx.js.org/migrating-from-4-or-5.html 和 https://mobx.js.org/react-integration.html

使用 mobx 更改 @observable 属性不要在我的项目中重新渲染观察者组件

Change @observable property don't rerender observer component in my project with mobx

javascript

typescript

reactjs

mobx

mobx-react

使用 mobx 更改 @observable 属性 不要在我的项目中重新渲染观察者组件

Change @observable property don't rerender observer component in my project with mobx

javascript

typescript

reactjs

mobx

mobx-react

使用 mobx 更改 @observable 属性不要在我的项目中重新渲染观察者组件