redux React Formik enableReinitialize强制props.touched值重置

gopyfrb3 于 12个月前发布在 React

关注(0)|答案(1)|浏览(134)

我有一个从后端获取的数据：

fetchUserData = async () => {
        ...fetching data

        this.setState({
          username: resp.data.data.uname
        });
  }

字符串
并且我希望Formik从后端验证保存的数据，所以我在Formik组件中添加了enableReinitialize：

<Formik
   initialValues={{
       username: this.state.username,
       password: this.state.password,
       confirmPassword: this.state.confirmPassword
   }}
   validationSchema={this.schema}
   enableReinitialize
>

型
但问题是，它现在重置了 prop 的触动值：

的数据
谢谢.

redux

来源：https://stackoverflow.com/questions/66530570/react-formik-enablereinitialize-forces-props-touched-values-to-reset

1条答案

按热度按时间

dw1jzc5e1#

在重新初始化后，没有办法保持被触摸的状态。我们将不得不实现一个变通方案来备份touched对象，并使用initialTouched来恢复它。
或者，给予enableReinitialize标志，如果你不想每次状态值改变时都重置表单。你可以使用Formik innerRef手动调用resetForm()，setValues()，setFieldValue()等，根据你的用例在合适的时间。
使用方法：

import { useRef } from "react";
import { Formik } from "formik"; // formik v2

const formRef = useRef();

<Formik
  innerRef={formRef} // <--- add this
  // enableReinitialize <--- remove this
  initialValues={{
       username: this.state.username, // now, state changes will not auto reflect in your form
       password: this.state.password,
       confirmPassword: this.state.confirmPassword,
  }}
  validationSchema={this.schema}
>

个字符

赞(0）回复(0）举报 12个月前

我来回答

redux React Formik enableReinitialize强制props.touched值重置

1条答案

相关问题

热门标签

最新问答