Наблюдатель Mobx не реагирует на изменения в наблюдаемых

Question

После вызова действия наблюдаемая обновляется новыми значениями, но не вызывает обновления в моем классе наблюдателя.Реакция происходит, когда я ставлю проверку состояния в рендер, который использует наблюдаемый объект.Но я использую наблюдаемый объект в другом месте внутри возвращенного DOM в качестве условия поддержки.Я не мог понять, почему это происходит.

Вот мой класс наблюдателя

@inject("store")
@observer
export default class SignupWithMobileNo extends Component {
  constructor() {
    super();
    this.sendOTP = this.sendOTP.bind(this);

    this.state = {
      phoneInput: ""
    };
  }

  static navigationOptions = {
    header: null
  };

  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.handleBackButton);
  }

  handleBackButton() {
    ToastAndroid.show("You cannot go back", ToastAndroid.SHORT);
    return true;
  }

  sendOTP(phone) {
    this.props.store.userStore.sendOTP(phone);
  }

  componentDidUpdate() {
    console.log("component did update", this.props);
    const navigation = this.props.navigation;
    const { sendOTPRequest } = this.props.store.userStore;
    if (sendOTPRequest.state === "succeeded") {
      navigation.navigate("VerifyOTP");
    }
  }

  render() {
    const navigation = this.props.navigation;
    const { sendOTPRequest } = this.props.store.userStore;
    // reaction occurs when I uncomment the following lines.
    // if (sendOTPRequest.state === "succeeded") {

    // }
    return(
      <View style={styles.container}>
        <Formik
          initialValues={{
            phone: ""
          }}
          onSubmit={values => {
            this.sendOTP(values.phone);
          }}
          validate={values => {
            let errors = {};

            if (values.phone.length < 1) {
              errors.phone = "Invalid phone number";
            }

            return errors;
          }}
        >
          {({
            handleChange,
            handleSubmit,
            setFieldTouched,
            values,
            errors,
            touched
          }) => (
            <View style={styles.formBody}>
              <Text style={styles.headline}>Get authenticate your account</Text>
              <FormInput
                onChange={handleChange("phone")}
                value={values.phone}
                placeholder="Enter your phone number"
                keyboardType="phone-pad"
                onBlur={() => {
                  setFieldTouched("phone");
                }}
              />
              <FormButton
                onClickHandler={handleSubmit}
                buttonText="Send OTP"
                isDisabled={
                  values.phone.length < 1 ||
                  sendOTPRequest.state === "requested"
                }
              />

              {touched.phone && errors.phone ? (
                <Text style={styles.body}> {errors.phone} </Text>
              ) : null}

              {sendOTPRequest.state === "failed" ? (
                <Text style={styles.body}> {sendOTPRequest.error_code</Text>
              ) : null}
            </View>
          )}
        </Formik>
      </View>
    );
  }
}

Answer 1

Нет подписчиков на наблюдаемые данные в функции визуализации наблюдателя.Как только я добавил это, проблема решена.