[英]MobX + React Native not re-rendering
I am building a password reset with react native and MobX I am having a bit of trouble reseting the error state.我正在使用 react native 和 MobX 构建密码重置 我在重置错误状态时遇到了一些麻烦。 I have tried multiple solutions but none seem to be working, the onChangeText for the input seems to be working but my boolean value doesn't work for updating the UI, I can see the store logging out and it seems correct but the UI doesn't seem to be adding the error message I am using also using react native navigation:
我尝试了多种解决方案,但似乎没有一个有效,输入的 onChangeText 似乎有效,但我的布尔值不适用于更新 UI,我可以看到商店注销,它似乎是正确的,但 UI 没有t 似乎正在添加我正在使用的错误消息,也使用 react native 导航:
navigation.navigate('Forgot');
and heres my class:这是我的课:
import React from 'react';
import { action, observable } from 'mobx';
/**
*
*/
class PasswordResetStore {
@observable email = '';
@observable emailError = false;
@action setEmail = (value) => {
console.log(this.emailError);
this.emailError = true;
this.email.value = value;
};
}
const passwordResetStore = new PasswordResetStore();
export const PasswordResetContext = React.createContext(passwordResetStore);
and heres my component:这是我的组件:
import React, { useContext } from 'react';
import { View } from 'react-native';
import { Text, Input, Button } from 'react-native-elements';
import { observer } from 'mobx-react';
import { PasswordResetContext } from '../store/PasswordResetStore';
const PasswordReset = observer(() => {
const store = useContext(PasswordResetContext);
return (
<View>
<View>
<Text h3>Reset your password</Text>
</View>
<View>
<Text>Enter the email your used to sign up</Text>
<Input
onChangeText={store.setEmail}
value={store.email.value}
placeholder="Email"
keyboardType={'email-address'}
autoFocus={true}
autoCorrect={false}
maxLength={256}
autoCapitalize={'none'}
errorMessage={store.emailError ? 'email not found' : ''}
/>
{/*<Button onPress={store.onResetPassword} title="Search" />*/}
</View>
</View>
);
});
export default PasswordReset;
Thanks谢谢
Initial load (where you see true I should be seeing the validate error) [1]: https://i.stack.imgur.com/HYcAy.png初始加载(在你看到的地方,我应该看到验证错误)[1]: https : //i.stack.imgur.com/HYcAy.png
Updated: added a reset but still not showing up the boolean values are correct:更新:添加了一个重置但仍然没有显示布尔值是正确的:
useEffect(() => {
return () => {
store.reset();
};
}, []);
@action reset = () => {
this.emailError = false;
};
If you were using MobX 6 then you now need to use makeObservable
method inside constructor to achieve same functionality with decorators as with MobX 5 before:如果您使用的是 MobX 6,那么您现在需要在构造函数中使用
makeObservable
方法来实现与之前的 MobX 5 相同的装饰器功能:
import { makeObservable } from "mobx"
class PasswordResetStore {
@observable email = '';
@observable emailError = false;
constructor() {
// Just call it here
makeObservable(this);
}
@action setEmail = (value) => {
console.log(this.emailError);
this.emailError = true;
this.email.value = value;
};
}
Although there is new thing that will probably allow you to drop decorators altogether, makeAutoObservable
:虽然有一些新东西可能会让你完全删除装饰器,但
makeAutoObservable
:
import { makeAutoObservable } from "mobx"
class PasswordResetStore {
// Don't need decorators now
email = '';
emailError = false;
constructor() {
// Just call it here
makeAutoObservable (this);
}
setEmail = (value) => {
console.log(this.emailError);
this.emailError = true;
this.email.value = value;
};
}
More info here https://mobx.js.org/migrating-from-4-or-5.html and https://mobx.js.org/react-integration.html更多信息在这里https://mobx.js.org/migrating-from-4-or-5.html和https://mobx.js.org/react-integration.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.