重新渲染时取消注册/注册字段-redux-form

问题描述

我为Redux表单创建了<Form />组件。表单允许reduxForm HOC的所有配置。它用于将redux形式不仅用作HOC，而且用作简单的可重用组件。一切都很好，但是，每当initialValue更改时，我都希望重新呈现组件。它用于异步请求。每当组件在我的组件内重新呈现redux-form时，都会取消注册/注册所有字段。如何防止在重新渲染时取消注册/注册操作？

我的表单组件

import React,{ FC,useMemo } from "react";
import { reduxForm,ConfigProps } from "redux-form";
import { Button } from "components/shared";
import { useStyles } from "./form.style";
import clsx from "clsx";

export interface IForm {
  name: string;
  onSubmit: any;
  className?: string;
  config?: Omit<ConfigProps,"form">;
}

export const Form: FC<IForm> = ({ name,config,...rest }) => {
  const styles = useStyles();

  const ReduxForm: FC<any> = ({
    children,handleSubmit,className
  }) => {
    return (
      <form onSubmit={handleSubmit} className={clsx(className,styles.form)}>
        {children}
      </form>
    );
  };

  const FormWrapped = useMemo(() => {
    return reduxForm({ form: name,...config })(ReduxForm);
  },[config]);
  return <FormWrapped {...rest} />;
};

使用表单组件

  <Form
     name="form"
     onSubmit={(data: any) => console.log(data)}
     config={{
          initialValues: {
            nationality: countries.filter((c) => c.code === "031")[0],name: currentUser.fullName?.split(" ")[0]
          },destroyOnUnmount: false,}}
      >
      <Field
        component={Autocomplete}
        options={countries}
        optionLabel="name"
        name="nationality"
        label={lang.citizenship}
        loading={loading}
       />
        <Field component={TextField} name="name" label={lang.phone} />
        <Button type="submit" />
  </Form>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）