反应 + mobx 示例 尝试导入错误：'useObservable'未从'mobx-react-lite'导出

Question

请提出解决方案。 浏览器上显示的错误是

编译失败 ./src/App.js 尝试导入错误："useObservable"未从"mobx-react-lite"导出。

import React from 'react';
import './App.css';
import {observer, useObservable} from 'mobx-react-lite';

const App = observer(() => {
const store = useObservable({
count:1,
addOne(){
store.count++;
},
subOne(){
store.count--;
}
})
function addOneHandle(){
store.addOne();
}
function subOneHandle(){
store.subOne();
}
return (
<div className="App">
<header className="App-header">
<h1>Count: {store.count}</h1>
<button onClick={addOneHandle}>Add 1</button>
<button onClick={subOneHandle}>Sub 1</button>
</header>
</div>
);
})
export default App;

Answer 1

这useObserver不是useObservable

Answer 2

import { useObserver, useLocalStore } from "mobx-react-lite";
const App = () => {
// Creating our store
const store = useLocalStore(() => ({
count: 1,
addOne() {
store.count++;
},
removeOne() {
store.count--;
},
}));
const addOneHandle = () => {
store.addOne();
};
const removeOneHandle = () => {
store.removeOne();
};
return useObserver(() => (
<div className="App">
<header className="App-header">
<h1>State management with MobX</h1>
<h1>Count: {store.count} </h1>
<button onClick={addOneHandle}>Add One</button>
<button onClick={removeOneHandle}>Remove One</button>
</header>
</div>
));
};
export default App;

您可以参考官方文档... https://mobx-react.js.org/observer-hook

Answer 3

import { useObservable } from 'mobx-react-better-use-observable'

Answer 4

//use {useLocalObservable } instead of {useObservable } from "mobx-react-little";
import React from "react";
import "./App.css";
import { observer, useLocalObservable } from "mobx-react-lite";
const App = observer(() => {
const store = useLocalObservable(() => ({
count: 1,
addOne() {
store.count++;
},
subOne() {
store.count--;
},
}));
function addOneHandle() {
store.addOne();
}
function subOneHandle() {
store.subOne();
}
return (
<div className="App">
<header className="App-header">
<h1>Count: {store.count}</h1>
<button onClick={addOneHandle}>Add 1</button>
<button onClick={subOneHandle}>Sub 1</button>
</header>
</div>
);
});
export default App;