Блог

Я создаю сброс пароля с помощью react native и MobX, у меня возникли небольшие проблемы с сбросом состояния ошибки. Я пробовал несколько решений, но, похоже, ни одно из них не работает, onChangeText для ввода, похоже, работает, но мое логическое значение не работает для обновления пользовательского интерфейса, я вижу, что магазин выходит из системы, и это кажется правильным, но пользовательский интерфейс, похоже, не добавляет сообщение об ошибке, которое я также используюиспользование навигации react native:

 navigation.navigate('Forgot');
  

и вот мой класс:

 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);
  

и вот мой компонент:

 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;
  

Спасибо

Начальная загрузка (где вы видите true, я должен видеть ошибку проверки) [1]: https://i.stack.imgur.com/HYcAy.png

Обновлено: добавлен сброс, но по-прежнему не отображаются правильные логические значения:

   useEffect(() => {
    return () => {
      store.reset();
    };
  }, []);
  

   @action reset = () => {
    this.emailError = false;
  };
  

Если вы использовали 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;
  };
}
  

Хотя есть новая вещь, которая, вероятно, позволит вам полностью отказаться от декораторов, 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;
  };
}
  

Больше информации здесь
https://mobx.js.org/migrating-from-4-or-5.html и https://mobx.js.org/react-integration.html