react + mobx 示例尝试导入错误：“useObservable”未从“mobx-react-lite”导出答案

【问题标题】：react + mobx example Attempted import error: 'useObservable' is not exported from 'mobx-react-lite'react + mobx 示例尝试导入错误：“useObservable”未从“mobx-react-lite”导出
【发布时间】：2020-08-27 03:44:37
【问题描述】：

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

编译失败 ./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;

【问题讨论】：

标签： reactjs mobx mobx-react

【解决方案1】：

这是useObserver 不是useObservable

【讨论】：

如果我尝试 UseObserver 我得到以下错误：TypeError: fn is not a function。在 src/useObserver.ts:123 中使用以下行：rendering = fn()。在 package.json 我有 "mobx": "^5.15.4", "mobx-react-lite": "^2.0.7",

【解决方案2】：

从“mobx-react-better-use-observable”导入 { useObservable }

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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;

【讨论】：

请您解释一下您的答案。你做了什么改变使它工作？
您发布的代码不是可运行的sn-p（只需单击“运行...”按钮，您就会意识到这一点）！请编辑您的答案并将您的代码格式化为普通代码块（使用简单的三个反引号代码围栏）。
@Leo 我将 {useObservable } 从 "mobx-react-little" 更改为 {useLocalObservable } 并且 {useLocalObservable } 使用回调函数。
@AdrianMole 它在这里不起作用，因为它是一个反应应用程序代码（给出导入错误，因为所有模块在此处不可用）您需要使用 npm 创建反应应用程序，然后当您替换该代码时App.js 它将工作。