[英]How to re-render Formik values after updated it - 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>
您可以使用enablereinitialize
道具上formik。
<Formik
enableReinitialize
...
/>
默认情况下它是假的,但如果它是真的,将会发生的事情是如果你的初始值改变,它会重新渲染。 所以你可以将你的initialValues
存储在 state 中。
例如
state = {
initialValues: { name: '', ...}
}
当您更新配置文件数据时,只需更新该状态。
setState({initialValues: newInitialValues })
https://jaredpalmer.com/formik/docs/api/formik#enablereinitialize-boolean
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.