Reactjs 如何在react组件中处理异步请求的副作用

我使用mobx进行异步api调用，根据服务器响应设置成功或失败属性。如果成功，我必须导航到不同的屏幕/路线，否则显示错误

我可以显示错误消息，没有任何问题。但在尝试导航或推送到不同的路径时，在渲染函数中，我得到了以下警告

Warning: Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

哪个组件生命周期功能适合我的情况

 render() {
console.log(this.props);
const navigation = this.props.navigation;
const { sendOTPRequest } = this.props.store.userStore;
if (sendOTPRequest.state === "succeeded") {
  //if succeeded
  navigation.navigate("VerifyOTP");
  return null;
}
return (
  <View style={styles.container}>
    <View style={styles.formHeader}>
      <Image
        source={Logo}
        style={{
          height: 120,
          resizeMode: "contain",
          marginBottom: 5,
          display: "flex"
        }}
      />
      <Text style={styles.body}> Eat. Stamp. Reward.</Text>
    </View>
    <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 style={styles.formFooter}>
      <View style={styles.indicatorContainer}>
        <View style={styles.indicator} />
        <View style={styles.indicatorActive} />
      </View>
    </View>
  </View>
);

---

}

尝试从渲染函数中删除导航代码，并将其添加到ComponentWillReceiveProps ExtProps。检查下面的代码

   componentWillReceiveProps(nextProps) {
const navigation = this.props.navigation;
const { sendOTPRequest } = this.nextProps.store.userStore;
if (sendOTPRequest.state === "succeeded") {
  //if succeeded
  navigation.navigate("VerifyOTP");
} 
}

您的渲染方法将是

render() {
console.log(this.props);
const navigation = this.props.navigation;
const { sendOTPRequest } = this.props.store.userStore;
if (sendOTPRequest.state === "succeeded") {
  return null;
}
return (
  <View style={styles.container}>
    <View style={styles.formHeader}>
      <Image
        source={Logo}
        style={{
          height: 120,
          resizeMode: "contain",
          marginBottom: 5,
          display: "flex"
        }}
      />
      <Text style={styles.body}> Eat. Stamp. Reward.</Text>
    </View>
    <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 style={styles.formFooter}>
      <View style={styles.indicatorContainer}>
        <View style={styles.indicator} />
        <View style={styles.indicatorActive} />
      </View>
    </View>
  </View>
);
}

---

通常认为在渲染中更改状态是一种不好的做法，例如导航到其他路径。您应该将其移动到处理程序服务器响应的函数，或者至少在componentWillReceiveProps中执行。发布渲染方法我现在不能使用componentWillReceiveProps@SergiiVorobei@VinayakB更新。请查看：在最新的react版本中使用componentWillMount可以吗？在道具更改期间不会调用componentWillMount。在这种情况下，使用componentWillReceiveProps