Как перерисовать значения Formik после его обновления - React Native? - PullRequest
Новая
       7

Как перерисовать значения Formik после его обновления - React Native?

0 голосов
/ 15 февраля 2020

У меня есть экран для обновления ранее данных «имя, адрес электронной почты, возраст и т. Д. c». в первый раз я вызываю функцию, которая получает данные от имени сервера как 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});
    }
  }

UI 

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

1 Ответ

0 голосов
/ 15 февраля 2020

Вы можете использовать enablereinitialize prop в formik. 

<Formik 
  enableReinitialize
  ...
/>

По умолчанию это false, но если это правда, то, что произойдет, если вы измените initialValues, он будет перерисован. Таким образом, вы можете сохранить initialValues в состоянии.

, например, 

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

, а когда вы обновляете данные профиля, просто обновите это состояние. 

setState({initialValues: newInitialValues })

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

...