6

在我的反应应用程序（带有打字稿）中，我想使用 React 钩子（特别是 useState）来管理表单状态，同时将其用作 Mobx 商店的可观察组件，但我得到了错误

Hooks 只能在函数组件的主体内部调用。

因此，例如在以下组件中

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用于导出商店类。是不是 Mobx 和 Hooks 的旧方法在哪里？

这是示例的sanbox

4

2 回答 2

8

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

于 2019-09-27T08:40:38.283 回答
6

mobx-react不支持钩子，如果你想在 mobx 中使用钩子，你需要使用github 文档mobx-react-lite中也提到的钩子

为此，您可以使用React.createContext代替提供者和useContext代替inject

索引.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);

我的组件.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;

工作演示

于 2019-03-25T06:30:01.967 回答