mobx - 如何使用 mobx-react-devtools
问题描述
我已mobx-react-devtools
作为开发依赖项安装,将其引用导入到 my中,并按照 npm 文档中的说明index.js
插入。<DevTools />
但是我得到3个错误:
TypeError: Cannot read property 'on' of undefined
TypeError: (0 , a.trackComponents) is not a function
TypeError: Cannot read property 'dispose' of undefined
我究竟做错了什么?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { observable, configure } from 'mobx';
import { observer } from 'mobx-react';
import DevTools from 'mobx-react-devtools';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
configure({ enforceActions: 'observed' }); // All state that is observed somewhere needs to be changed through actions
const appState = observable({
count: 0,
incCount: () => {
appState.count += 1;
},
decCount: () => {
appState.count -= 1;
},
});
const Counter = observer((props) => (
<section>
{props.appState.count}
<div>
<button onClick={props.appState.incCount}>Add</button>
<button onClick={props.appState.decCount}>Dec</button>
<DevTools />
</div>
</section>
));
ReactDOM.render(
<React.StrictMode>
<Counter appState={appState} />
</React.StrictMode>,
document.getElementById('root')
);
包.json
{
"name": "react-mobx-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.3.0",
"mobx": "^6.0.4",
"mobx-react": "^7.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"mobx-react-devtools": "^6.1.1"
}
}
我的github
解决方案
来自mobx-react-devtools团队的制作者
注意:此软件包已弃用。请改用浏览器插件。另请注意,对于 mobx-react@6 及更高版本,不再需要该软件包,请参阅更改日志
推荐阅读
- javascript - 动画顶部三角形的左侧与所选菜单元素的左侧对齐
- android - 当数据准备好时,FragmentPagerAdapter 将对象列表传递给片段
- c - 在 C 中打开文件以进行读取
- java - java : 使用缓冲输入流是否使输入流到字节 [] 的转换更有效?
- powershell - Robocopy 文件到随机命名文件夹
- ios - 自定义重置根 ViewController segue 不显示正确的导航栏标题和按钮
- excel - 在预定义的位置创建数据透视表
- xslt - 如何使用 XSLT 在 toc.ncx 中添加 playOrder?
- reactjs - Recaptcha 缺少必需的参数:sitekey
- javascript - 在最终形式重新初始化时保留脏表单值