我收到错误：测试套件运行失败：意外的令牌 (5:0)
3 | import Locale from '../stores/view/language'
4 |
5 | @observer
| ^
6 | export default class DateFormat extends Component {
7 | constructor(props) {
8 | super(props)
我使用 Webpack + Babel + Jest + Enzyme + React + Mobx
这是我的一些 package.json
{
"scripts": {
"test": "jest",
},
"devDependencies": {
"babel-eslint": "8.0.1",
"babel-jest": "21.2.0",
"enzyme": "3.1.0",
"enzyme-adapter-react-16": "1.0.2",
"jest": "21.2.1",
},
"babel": {
"presets": [
"env",
"react"
],
"env": {
"test": {
"presets": [
"env",
"react"
] …我喜欢 MobX。我想在原生 JavaScript 中使用它。我尝试添加 CDN https://cdnjs.com/libraries/mobx 然后我尝试使用 MobX 语法编写一个类：
class MyStore {
@observable data = 'foo'
}
const myStore = new MyStore();
但我收到错误：
SyntaxError: illegal character
对于@和 ：
ReferenceError: exports is not defined
从内部mobx.js文件。
所以如果没有 React 和 Blunding/Transpiler，这似乎是不可能的，是吗？如果没有，还有其他选择吗？
谢谢你！
我正在从头开始一个项目（使用 React + MobX），并且由于 MobX 对结构并没有真正的意见，所以我在定义它时确实遇到了一些麻烦，并且找不到任何真正完整的示例。
我已经阅读了大量材料+完整的 MobX 文档（包括有关商店的最佳实践），但仍然有些内容不清楚。
我的问题如下：
因此，总的来说，我真的很想获得一些 React + MobX 项目结构的示例，并描述使用和维护该结构的优缺点。
我在 NextJS 应用程序上使用 mobx-state-tree 进行服务器端渲染。仅在服务器上，我获取 API 来加载一些信息并添加到我的商店。但是在客户端加载之后，我的存储被清除，因为我需要在服务器和客户端上实例化。这是我的问题。
我的商店：
const Store = types
.model('Store', {
user: types.compose(User),
});
const createStore = Store.create({
user: {},
});
let store = null;
/**
* Init store
*
* @param {bool} isServer
* @param {object} snapshot
*/
const initStore = (isServer, snapshot = null) => {
if (isServer) {
store = createStore;
}
if (store === null) {
store = createStore;
}
if (snapshot) {
applySnapshot(store, snapshot);
}
return store;
};
我在客户端的组件：
static getInitialProps({ req …假设我有一个商店，其中有一个组织列表，用户可以“选择”组织，然后将其存储在“filter”数组中。
export class OrganizationStore extends ArrayStore {
//organizations = new Map();
constructor( ...args) {
super(args);
this.organizations = new Map();
this.filter = [];
this.getter_url = '/organization/get-organizations';
}
async getData() {
const full_url = new URL(this.getter_url);
const options = {};
options.method = 'GET';
options.credentials = process.env.NODE_ENV === 'production' ? 'same-origin' : 'include';
const response = await fetch(full_url, options);
if (response.ok) {
const d = await response.json();
this.buildStore(d);
}
}
buildStore(values) {
this.organizations.clear();
for (const {id, name} of values) {
this.organizations.set(id, new Organization(id, …我有三个组成部分；表单、预览和 AppStore。单击表单中的按钮会将商品添加到商店。这似乎工作正常，除了预览组件中的列表在商店更改时不会更新/重新渲染，即使它有一个 @observer 装饰器。我缺少什么？
表单有一个按钮和处理函数，用于将项目添加到商店：
@inject('AppStore')
@observer class Form extends React.Component{
handleAddItem= (item) =>{
const {AppStore} = this.props;
AppStore.addItem(item);
console.log(AppStore.current.items)
}
render(){
return(
<button onClick={() => this.handleAddItem('Another Item')}>Add Item</button>
)}
}
通过项目预览地图（我正在使用拖放功能，因此我的代码可能看起来有点奇怪）
@inject('AppStore')
@observer class Preview extends React.Component
...
return(
<ul>
{items.map((value, index) => (
<SortableItem key={`item-${index}`} index={index} value={value} />
))}
</ul>)
...
return <SortableList items={AppStore.current.items} onSortEnd={this.onSortEnd} />;
这里是商店：
import { observable, action, computed } from "mobx";
class AppStore {
@observable other = {name: '', desc:'', items: [ 'item 1', …我正在尝试在 React.js 项目中使用 mobx。我已经使用以下yarn add命令安装了这些软件包：
yarn add mobx mobx-react react-app-rewired react-app-rewire-mobx
之后，我在 package.json 文件中用react-app-rewired 替换了react-scripts。
"dependencies": {
"mobx": "^5.13.0",
"mobx-react": "^6.1.3",
"react": "^16.9.0",
"react-app-rewire-mobx": "^1.0.9",
"react-app-rewired": "^2.1.3",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
但是当我在终端中输入npm start命令时，它给我错误并且没有任何启动。这里是错误行：
D:\Projects\react\todo>npm start
> todo@0.1.0 start D:\Projects\react\todo
> react-app-rewired start
D:\Projects\react\todo\node_modules\react-scripts\node_modules\resolve\lib\sync.js:76
throw err;
^
Error: Cannot find module 'typescript' from 'D:\Projects\react \todo\node_modules'
at Function.module.exports [as sync] (D:\Projects\react \todo\node_modules\react-scripts\node_modules\resolve\lib\sync.js:74:15) …我正在编写一个电子应用程序，并将所有应用程序数据保存在一个 MST 树中。现在我注意到，时不时地您会遇到数据变得不一致的情况（缺少引用对象等）。虽然任何类型的数据库都可能发生这种情况，但我发现 MST 存在一个特殊问题：
由于我们有一棵树在应用程序启动时被反序列化，然后用作单个快照，因此单个不一致将导致整个应用程序失败。我的应用程序将无法获得任何数据。
关于如何处理这个问题有任何提示吗？
更多信息
目前，每次树发生变化时（onSnapshot），我都会创建一个快照并将其保存在 localStorage 中。因此，错误用例是：创建 mst 对象 -> 在树的其他部分创建引用 -> 删除 mst 对象 -> 触发 onSnapshot -> 损坏的树被持久化。重新加载应用程序不会有帮助，因为树持续处于损坏状态。
我定义了一个从数组中删除项目的操作：
export default class myStore {
@observable items = [];
...
...
@action deleteItem = async (target) => {
try {
await backendService.deleteItem(target.id);
runInAction(() => {
const targetIndex = this.items.indexOf(target);
this.items.splice(targetIndex, 1);
});
} catch (error) {
...
}
};
...
...
}
尽管我将组件设置为observer，但它仍然不会更新我的列表，直到我触发一些其他操作（单击、重命名等），在这种情况下，我将能够看到该项目已被删除。
我错过了什么吗？
我查看了 mobx-state-tree 文档，甚至测试文件https://github.com/mobxjs/mobx-state-tree/blob/master/packages/mobx-state-tree/tests/core/reference- custom.test.ts#L148 找出如何从异步源填充引用节点。例如，加载了 user1 并引用了 user2，但 user2 不在树中，因此去获取 user2 并加载它。过去我让所有用户都提前加载，所以 types.late() 工作得很好。但我已停止在加载时间开始时加载所有用户，而是只想加载正在引用的用户数据。
这是一个示例片段。我实际上并没有在沙箱中运行这个示例，因为我正在向你们寻求有关在哪里以及如何异步获取丢失节点背后的逻辑的指导帮助。您会注意到，在创建商店时加载的两个用户引用了尚未加载的第三个用户。当 MST 用前两个用户填充树并遇到对已卸载用户 ID 的引用时，我们如何让它获取用户，然后将其添加到用户映射中？
export const User = types
.model("User", {
id: types.identifier,
name: types.string,
friends: types.array(types.late(types.reference(User)))
})
.preProcessSnapshot(snapshot => {
if (snapshot){
return({
id: snapshot.id,
name: snapshot.name,
friends: snapshot.friends
})
}
})
export const UserStore = types
.model("UserStore", {
users: types.map(User),
})
.actions( self => ({
fetchUser: flow(function* (userId) {
let returnThis
try {
returnThis = yield ajaxFetchUser(userId)
self.users.put(returnThis)
} catch …mobx ×10
reactjs ×6
javascript ×5
mobx-react ×2
arrays ×1
decorator ×1
enzyme ×1
jestjs ×1
next.js ×1
node.js ×1
npm ×1
react-native ×1
store ×1