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

观察者的渲染函数中没有可观察数据的订阅者。添加完后，问题就解决了。

Mobx观察者对可观察的变化没有反应

1 个答案: