福米克。脏检查答案

【问题标题】：Formik. Dirty check福米克。脏检查
【发布时间】：2021-08-09 09:53:38
【问题描述】：

有人可以告诉我如何使添加数据与通过脏检查一起工作。按钮的渲染是有效的，但是当我点击它时，initialState 会获取新数据并更新，因此脏应该返回 false，但事实并非如此。

状态：

  const [store, setStore] = useState<UserDataType>({
    firstName: 'Artem',
    lastName: 'Bugay',
    email: '',
    age: '',
    country: '',
    region: '',
    placeOfWork: '',
    occupation: '',
  });

将更改保存到本地存储的功能：

  const changeState = (values: UserDataType) => {
      setStore(values);
  };

组件返回：

  return (
<Styled.WrapperContainer>
  <Styled.Container>
    <GlobalStyled.Title>Your profile</GlobalStyled.Title>
    <Formik initialValues={store} onSubmit={updateProfile}>
      {({ values, isSubmitting, handleChange, dirty }) => {
        return (
          <GlobalStyled.FormFormik>
            {console.log('dirty', dirty)}
            <Styled.Field
              type="text"
              name="firstName"
              label="First Name"
              value={values?.firstName}
              onChange={handleChange}
            />
            <Styled.Field
              type="text"
              name="lastName"
              label="Last Name"
              value={values?.lastName}
              onChange={handleChange}
            />
            <Styled.Field
              type="email"
              name="email"
              label="Email"
              value={values?.email}
              onChange={handleChange}
            />
            ...
              <Styled.ButtonAntd
                data-testid="profile"
                htmlType="submit"
                disabled={!dirty}
                onClick={() => changeState(values)}
              >
                Update
                {/* <Spinner loading={isLoading === StateStatus.Pending} size={20} /> */}
              </Styled.ButtonAntd>
          </GlobalStyled.FormFormik>
        );
      }}
    </Formik>
  </Styled.Container>
</Styled.WrapperContainer>
);

【问题讨论】：

标签： reactjs typescript formik

【解决方案1】：

      onSubmit={(values, { setSubmitting, resetForm }) => {
        setSubmitting(true);
        setTimeout(async () => {
          resetForm({ values });
        }, 100);
      }}

【讨论】：

【解决方案2】：

你不需要使用setStore，你有变量{values}。

每次字段值更改时，您都会更新 {values} 中的数据。您可以检查您创建的自定义函数onChange 元素。也检查一下这个info。

另外，您可以使用高级lib 查看字段数据。

【讨论】：