React Hooks (useState) и Mobx - PullRequest
Новая
       37

React Hooks (useState) и Mobx

4 голосов
/ 25 марта 2019

в моем приложении реагирования (с машинописью) я хочу использовать ловушки 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 для экспорта класса магазина. разве не где старый подход для мобкса и хукса?

вот sanbox для примера

1 Ответ

3 голосов
/ 25 марта 2019

mobx-react не поддерживает хуки, и если вы хотите использовать хуки с mobx, вам нужно использовать mobx-react-lite, что также упоминается в документации github

Для этого вы можете использовать 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;

Рабочая демонстрация

...