React Hooks (useState)和Mobx [无mobx-react-lite]

Question

在我的React应用程序（使用TypeScript）中，我想使用React hooks（特别是useState）来管理表单状态，并同时将其用作Mobx存储的可观察组件，但我遇到了以下错误：

Hook只能在函数组件体内调用。

因此，例如在以下组件中：

import * as React from "react";
import { inject, observer } from "mobx-react";
import { MyStore } from "./MyStore";

interface IProps {
  myStore?: MyStore;
  id: string;
}

const MyComponent: React.FC<IProps> = props => {
  const [state, setState] = React.useState("");
  return (
    <div>
      <h1>{props.id}</h1>
    </div>
  );
};
export default inject("myStore")(observer(MyComponent));

我看到了一个解决方案，但是那个方案使用了 React.createContext 导出 store 类。这不是 Mobx 和 Hooks 的旧方法吗？

以下是示例的 Sandbox：

- Amir-Mousavi

---

mobx-react@5 不支持 hooks，但是版本6将支持它，目前正在使用rc.4。 - Tholle

@Tholle，谢谢。顺便说一下，我看到你在这里特别活跃，尤其是对于React标签，你认为自16.8以来使用上下文变得更容易了，对于构建小到中型应用程序而言，是否更方便构建自定义状态管理器，而不是导入几MB的库？ - Amir-Mousavi

你绝对可以使用 useReducer hook，并通过上下文共享状态对象和分派函数，这将适用于许多用例，但我认为它不会取代适用于中型应用的 MobX。这在很大程度上取决于您特定项目的情况。 - Tholle

Answer 1

感谢@Tholle提到了 Mobx 版本，现在随着 Mobx 6 的发布，这个问题得到解决。

- Amir-Mousavi

Answer 2

mobx-react不支持hooks，如果您想要在mobx中使用hooks，则需要使用mobx-react-lite，这也在github文档中提到。

为此，您可以使用React.createContext而不是provider，并使用useContext而不是inject。

Index.tsx

import * as React from "react";
import { render } from "react-dom";
import MyComponent, { Store } from "./MyComponent";

import "./styles.css";
import MyStore from "./MyStore";

function App() {
  const [state, setState] = React.useState("");
  return (
    <Store.Provider value={MyStore}>
      <div className="App">
        <MyComponent id={"someID"} />
      </div>
    </Store.Provider>
  );
}

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

MyComponent.tsx

import * as React from "react";
import { Observer } from "mobx-react-lite";
import { MyStore } from "./MyStore";

interface IProps {
  myStore?: MyStore;
  id: string;
}

export const Store = React.createContext();
const MyComponent: React.FC<IProps> = props => {
  const [state, setState] = React.useState("");
  const store = React.useContext(Store);
  console.log(state, store);
  return (
    <div>
      <h1>{props.id}</h1>
    </div>
  );
};
export default MyComponent;

工作演示

- Shubham Khatri