时间戳

首页 > 解决方案 > 更新后如何重新渲染 Formik 值 - React Native？

javascript - 更新后如何重新渲染 Formik 值 - React Native？

问题描述

我有一个屏幕用于更新以前的数据“姓名、电子邮件、年龄等”。第一次我调用一个从服务器名称获取数据的函数getProfileData()

用户写入新数据后，我发送该“更新配置文件”的 POST 请求

这是成功的，但在那之后，我想用新数据重新渲染这个表单，所以我调用getProfileData()函数来获取新数据，但是重新渲染输入值不起作用！它仍然是以前的数据

我也尝试过，componentDidUpdate()但遗憾的是没有重新渲染:)

那么我该如何解决呢？

代码

getProfileData = async () => {
    let USER_TOKEN =
      '....';
    let AuthStr = `Bearer ${USER_TOKEN}`;
    let response = await API.get('/profile', {
      headers: {Authorization: AuthStr},
    });
    let {
      data: {data},
    } = response;
    let password = '';
    let password_confirmation = '';
    let {name, email, avatar, age, gender, country_id} = data;
    let initialValues = [];
    initialValues.push({
      name,
      password,
      password_confirmation,
      email,
      avatar,
      age,
      gender,
      country_id,
    });
    this.setState({initialValues: initialValues, loading: false}, () =>
      reactotron.log(this.state.initialValues[0]),
    );
  };


  updateProfile = async value => {
    let USER_TOKEN =
      '....';
    let AuthStr = `Bearer ${USER_TOKEN}`;
    const headers = {
      'Content-Type': 'application/json',
      Authorization: AuthStr,
    };
    let response = await API.post('/update_profile', value, {
      headers: headers,
    });
    let {
      data: {data},
    } = response;
    alert(data);
    this.getProfileData(); // called 
  };


 componentDidMount() {
    this.getCountryList();
    this.getProfileData();
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.initialValues !== this.state.initialValues) {
      console.log('componentDidUpdate', this.state.initialValues);
      this.setState({initialValues: this.state.initialValues});
    }
  }

用户界面

<Formik
                  validationSchema={formSchema}
                  initialValues={this.state.initialValues[0]}
                  onSubmit={(values, actions) => {
                    this.updateProfile(values);
                    reactotron.log(values), actions.resetForm();
                  }}>
                  {({
                    handleChange,
                    handleBlur,
                    touched,
                    errors,
                    handleSubmit,
                    values,
                    setFieldValue,
                  }) => (
                    <View>
                      <Item style={styles.item} floatingLabel>
                        <Label style={styles.formLabel}>name</Label>
                        <Input
                          style={styles.value}
                          rounded
                          onChangeText={handleChange('name')}
                          onBlur={handleBlur('name')}
                          value={values.name}
                        />
                      </Item>
                      <Text style={styles.errorText}>
                        {touched.name && errors.name}
                      </Text>
                 </View>
             )}
 </Formik>

标签： javascriptreactjsreact-nativeformik

解决方案

您可以enablereinitialize在 formik 上使用 prop。

<Formik 
  enableReinitialize
  ...
/>

默认情况下它是假的，但如果它是真的，如果你的 initialValues 改变会发生什么，它会重新渲染。所以你可以存储你initialValues的状态。

例如

state = {
  initialValues: { name: '', ...}
}

当您更新配置文件数据时，只需更新该状态。

setState({initialValues: newInitialValues })

https://jaredpalmer.com/formik/docs/api/formik#enablereinitialize-boolean

推荐阅读