如何使用MOBX，MOBX-REACT-LITE触发像SetState这样的状态？

Question

我想通过MOBX带入全球国家。我正在努力在MOBX创建一个全球状态。另外，我想提一下，我正在使用 mobx-react-lite 库。

这是指向CODESANBOX的链接。如果打开命令，您将能够在使用Usestate之前查看其工作原理。

这是我的商店

import { observable, action } from "mobx";

export class ProductStore {
  @observable categories: string[] = [];

  @action
  addCategory = (val: string) => {
    this.categories.push(val);
  };

  @action
  removeCategory = (val: string) => {
    this.categories = this.categories.filter((f) => f !== val);
  };
}

，这是我的上下文，

import { createContext, useContext } from "react";
import { ProductStore } from "./productStore";

type ProductContextValue = {
  productStore: ProductStore;
};

const ProductContext = createContext<ProductContextValue>(
  {} as ProductContextValue
);

const productStore = new ProductStore();

export const ProductProvider: React.FC<React.PropsWithChildren<{}>> = ({
  children
}) => {
  return (
    <ProductContext.Provider value={{ productStore }}>
      {children}
    </ProductContext.Provider>
  );
};

export const useStore = () => useContext(ProductContext);

我使用 addCategory and removeCategory 在我的组件中的动作。当我进行调试时，我可以看到操作正常工作。

但是，我无法达到更新的类别。

这是父组件

import "./styles.css";
import { ExampleComponent } from "./ExampleComponent";
import { useStore } from "./ProductContext";
import { useObserver } from "mobx-react-lite";
// import { useState } from "react";

export default function App() {
  // const [selectedCategories, setSelectedCategories] = useState<string[]>([]);

  const { productStore } = useStore();

  return useObserver(() => (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      {/* old Version with useState */}
      {/* {selectedCategories.map((m) => {
        return <div>{m}</div>;
      })} */}

      {/* This section not working like a setState */}
      {productStore.categories.map((m) => {
        return <div>{m}</div>;
      })}

      <ExampleComponent
        // selectedCategories={selectedCategories}
        // setSelectedCategories={setSelectedCategories}
        addCategory={productStore.addCategory}
        removeCategory={productStore.removeCategory}
      />
    </div>
  ));
}

如何解决此问题？我看不到MOBX部分的任何更改。

Answer 1

首先，您需要使用 MakeObServable 在商店构造函数中以使其与Decorator一起使用，例如：

import { observable, action, makeObservable } from 'mobx';

export class ProductStore {
  @observable categories: string[] = [];

  constructor() {
    makeObservable(this);
  }

  @action
  addCategory = (val: string) => {
    this.categories.push(val);
  };

  @action
  removeCategory = (val: string) => {
    this.categories = this.categories.filter((f) => f !== val);
  };
}

第二，请勿使用 Usebserver 它已弃用，请使用＆lt; observer＆gt; 组件或用观察者 hoc包装整个组件。