react + 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

从'mobx-react-better-use-observable‘导入{ useObservable }