我的 MobX 自动运行函数会注销undefined此处的两个值。另外，在我的组件中import user from '../../stores/UserStore，我使用的实例{user.userName}都没有显示任何内容。
import { observable, autorun } from 'mobx'
class UserStore {
@observable userName = "tommy";
@observable arr = [0,1]
}
const user = window.user = new UserStore
export default user;
// user.userName = "timmy"; // works, but not observable.
autorun(() => {
console.log(user.userName) // undefined
console.log(user.arr) // undefined
})
我们创建了一个简单的 MobX 存储来保存对象。每次 fooObject 更改时，此 MobX 存储也会与 AsyncStorage 同步：
import { observable } from 'mobx';
class FooStore {
@observable fooObject = {};
setFooObject(newFooObject) {
this.fooObject = newFooObject;
this.syncWithAsyncStorage();
}
syncWithAsyncStorage() {
AsyncStorage.setItem('fooObject', JSON.stringify(this.fooObject));
}
然后，应用程序中的各个屏幕都会使用此 mobx 商店。
正如您所看到的，我们使用 RNAsyncStorage来始终存储 的当前状态，RN 是一种 LocalStorage，但对于本机应用程序而言fooObject。
问题是：当应用程序关闭时，我们会丢失 FooStore 状态，因此我们想要检索对 AsyncStorage 所做的最后一次“保存”（已持久保存）。
问题是 AsyncStorage（正如其名称所示）是一个 ASYNC 函数，我们不能等待 FooStore 构造函数中的承诺解析。
如何根据 AsyncStorage 解析的返回值来完成此 MobX 存储的初始状态初始化？
我们考虑在 FooStore 中编写一个初始化方法（异步方法），如下所示：
async initializeFromAsyncStorage() {
this.fooObject = await JSON.parse(await AsyncStorage.getItem('fooObject'));
}
然后在我们的根 App.js 中的应用程序初始化时调用此方法。
但我不确定这是否会带来意想不到的副作用，以及这是否是惯用的 mobx/react-native。
在我看来，人们正在互换使用model和props。我尝试查找有关道具的文档但失败了。有人可以告诉我有什么区别吗？
我不知道如何将两个商店合并到一个 RootStore 中（使用 Typescript）。例如，我有liveImageStore.ts（带有请求图像的方法，还保存最后 10 个图像的 url 数组）和notificationStore.ts（有一些逻辑来设置/清除通知，以便在整个应用程序中进一步使用。并在 liveImageStore 中请求.ts 提供了一些错误（例如，如果出现 http 连接问题）。我想在第一个商店的请求方法中调用notificationStore.ts中的函数（setNotification，推送新通知）。但是如何转发和输入它all?Notifier 组件显示消息使用 notificationStore。
我只是用 mobX 玩了一些代码，就发生了这种情况，不知道为什么，但我确信它与官方文档没有太大不同
这是store.tsx
import { observable, computed, action, makeObservable, override, makeAutoObservable } from "mobx"
class CounterStore {
initValue = 0
powValue = Math.pow(this.initValue, 2)
constructor() {
makeAutoObservable(this)
}
increaseNumber() {
this.initValue = this.initValue + 1
}
}
const Store = new CounterStore()
export default Store
这是我使用这个的地方。称为增量.tsx
import { observer } from "mobx-react"
export const IncrementButton = observer(({ store }) => {
return (
<div>
<button onClick={store.increaseNumber}>Increase</button>
<h1>{store.initValue}</h1>
</div>
)
})
和index.tsx
ReactDOM.render(
<React.StrictMode>
<IncrementButton store={Store} /> …我有3个国家/地区的数组，并输入了一个文本来过滤它们。如果输入文本输入，它将检查针对国家名称输入的内容，这将返回与过滤后的文本匹配的新的过滤后的国家列表。它还应在旁边显示输入的文本Typed Text:
import React, { Component } from 'react'
import { View, Text, TextInput } from 'react-native'
import { observable, action } from 'mobx';
import { observer } from 'mobx-react/native'
@observer
export default class Country extends Component {
@observable filterTermValue;
@observable countriesList = [
{'slug': 'amsterdam', 'name': 'Amsterdam'},
{'slug': 'usa', 'name': 'United States'},
{'slug': 'vienna', 'name': 'Vienna'}
];
render() {
return (
<View>
<Text>Typed Text: {this.filterTermValue}</Text>
<TextInput placeholder="Start typing country"
value={this.filterTermValue}
onChange={this.onChangeFilterTerm} />
{this.countriesList.map(country =>
<View key={country.slug}>
<Text>{country.name}</Text>
</View> …我有一个提取我componentDidMount不会刷新appState数据,@observer @inject('appState')但我会一直工作@inject('appState') @observer.
与此同时,我在控制台收到一条警告,说我的订单错了.
Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'
哪个订单正确,为什么？
我是Mobx和reactjs的新手，我了解Redux和本机响应，并且在Redux中，当我习惯于调用动作并且道具得到更新时，componentDidUpdate生命周期方法会被触发。
我现在遇到的情况是登录。因此，用户填写表单，单击提交，然后提交调用Mobx操作（异步），并且服务器响应时，观察对象将更新，然后导航到主页（在组件中进行导航）。
这是我的商店代码。
import { autorun, observable, action, runInAction, computed, useStrict } from 'mobx';
useStrict(true);
class LoginStore {
@observable authenticated = false;
@observable token = '';
@computed get isAuthenticated() { return this.authenticated; }
@action login = async (credentials) => {
const res = await window.swaggerClient.Auth.login(credentials)l
// checking response for erros
runInAction(() => {
this.token = res.obj.token;
this.authenticated = true;
});
}
}
const store = new LoginStore();
export default store;
export { LoginStore };
这个处理程序在我的组件中
handleSubmit = (e) …我已经有了一些接口,我想用这个接口来描述模型,就像下面的代码一样.否则,我必须通过再次使用写types的mobx-state-tree.但这不是正确的方法,什么是有效的解决方案？
import { types } from 'mobx-state-tree';
export interface IPeople {
name: string;
age: number;
}
const Peoples = types
.model({
name: 'peoples',
nancy: IPeople, // error at this line
})
export default Peoples;
为什么要在香草MobX上使用MobX状态树？好像我每次阅读有关MobX的文章时，都在同一个地方提到了MST。有人真的只在使用MobX吗？
问题可能太笼统了...