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

问题描述 投票:4回答:1

在我的react应用程序中(使用typescript)我想使用React钩子(特别是useState)来管理表单状态,同时将它用作Mobx存储的可观察组件,但是我得到了错误

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

例如,在以下组件中

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的例子

reactjs mobx mobx-react react-hooks react-tsx
1个回答
3
投票

mobx-react不支持钩子,如果你想使用与mobx的钩子你需要使用mobx-react-lite中提到的github documentation

要做到这一点,你可以使用React.createContext而不是提供者和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;

Working demo

© www.soinside.com 2019 - 2024. All rights reserved.