React Hooks (useState) и Mobx [без mobx-react-lite]
в моем реагирующем приложении (с машинописным текстом) я хочу использовать хуки React (в частности, useState) для управления состоянием формы и тем временем использовать его в качестве наблюдаемого компонента для хранилища Mobx, но я получаю сообщение об ошибке
Hooks can only be called inside the body of a function component.
так, например, в следующем компоненте
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?
вот песочница для примера
@Толле, спасибо. Кстати, как я вижу, вы так активны здесь, особенно для тега реакции, как вы думаете, использование контекста стало намного проще с версии 16.8, удобнее ли создавать собственный менеджер состояний для приложений малого и среднего размера, а не импортировать некоторые МБ библиотеки ?
Вы определенно можете использовать, например. перехватчик useReducer и совместное использование объекта состояния и функции отправки через контекст, который подойдет для многих случаев использования, но я не думаю, что он заменит MobX для приложений среднего размера. Это во многом зависит от вашего конкретного проекта.
Ответы 2
mobx-react не поддерживает хуки, и если вы хотите использовать хуки с mobx, вам нужно использовать 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);
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.info(state, store);
return (
<div>
<h1>{props.id}</h1>
</div>
);
};
export default MyComponent;
Благодаря тому, что @Tholle упомянул версию Mobx, теперь, когда выпущен Мобкс 6, этот вопрос решен.
mobx-react@5не поддерживает хуки, а его будет поддерживать версия 6, которая сейчас находится вrc.4.