如何在react中不重新加载的情况下以表单显示最新更新的数据

Question

我有一个反应表单，我最初显示的是获取数据并显示为默认值。当用户更新数据时，我正在重新获取数据。我想在表单中显示重新获取的数据，但它现在正在工作。

//imports
const GeneralDetails = () => {
 
  const [updateCatalogueInfo] = useUpdateCatalogueInfoMutation();
  const catId = parseInt(sessionStorage.getItem('CatalogueId') || 'NaN');
  const [defaults, setDefaults] = useState({});
  const { data, isLoading, isError, refetch } = useGetCatalogueDataByIdQuery(
    {
      catalogueId: catId,
      queryParams: 'feesAndDeposit',
    },
    { skip: !catId },
  );
  useEffect(() => {
    if (data && data.data) {
      setDefaults({
        // setting defaults from data
      });
    }
  }, [data]);

  if (isError) {
    showRightTopAlert('error', 'Error', 'Failed to load data, try again.');
  }
  console.log(defaults);
  const handleSubmit: SubmitErrorHandler<FieldValues> = async (formData) => {
    try {
      const catalogueDetails = {
        //data 
      };

      const feesAndDeposit = {
        //data
      };

      const response = await updateCatalogueInfo({
        CatalogueInfo: {
          catalogueDetails,
          feesAndDeposit,
        },
        catId: catId,
      });

      if ('data' in response) {
        showRightTopAlert('success', 'Success', `${response.data.message}`);
        refetch();
      } else {
        //error handling
      }
    } catch (error) {
      //error handling
    }
  };


  return (
    <div>
        {isLoading ? (
          <Loader />
        ) : (
          <FBForm onSubmit={handleSubmit} defaultValues={defaults}>
            //all the fields
          </FBForm>
        )}
    </div>
  );
};

export default GeneralDetails;

我已经将默认值置于反应状态并使用 useEffect 重新渲染，但它没有显示更新的默认数据。最好的方法是什么？为什么这不起作用？

Answer 1

1. 您遇到的问题是由于 FBForm 的处理方式造成的 默认值。

   1. 当data更改且defaults更新时，您需要显式调用重置方法。确保所有必要的导入都已完成 进口的。
   2. 使用 UseForm 钩子初始化表单并获取重置方法。
   3. 每次default状态发生变化时调用重置方法。

2. useForm初始化：useForm用于初始化表单，以及 传入defaultValues。

3. 重置表格：当数据 更改和默认值被更新，重置方法被调用 使用新的默认值更新表单字段。

4. 表单注册：确保 FBForm 中的表单字段已 挂号的 使用 React Hook Form 使用注册方法。通过做这个， 每当由于获取新数据而导致默认值发生变化时，表单 字段将相应更新。这种方法确保 表单始终反映最新数据，无需重新加载 整个组件。

---

    import React, { useEffect, useState } from 'react';
    import { useForm } from 'react-hook-form';
    import { useGetCatalogueDataByIdQuery, useUpdateCatalogueInfoMutation } from 'your-api-hooks';
    import Loader from 'your-loader-component';
    import FBForm from 'your-form-component';
    import { showRightTopAlert } from 'your-alert-component';
    
    const GeneralDetails = () => {
      const [updateCatalogueInfo] = useUpdateCatalogueInfoMutation();
      const catId = parseInt(sessionStorage.getItem('CatalogueId') || 'NaN');
      const [defaults, setDefaults] = useState({});
      const { data, isLoading, isError, refetch } = useGetCatalogueDataByIdQuery(
        {
          catalogueId: catId,
          queryParams: 'feesAndDeposit',
        },
        { skip: !catId },
      );
    
      const { register, handleSubmit, reset } = useForm({ defaultValues: defaults });
    
      useEffect(() => {
        if (data && data.data) {
          const newDefaults = {
            // setting defaults from data
          };
          setDefaults(newDefaults);
          reset(newDefaults); // Reset the form with new default values
        }
      }, [data, reset]);
    
      if (isError) {
        showRightTopAlert('error', 'Error', 'Failed to load data, try again.');
      }
    
      console.log(defaults);
    
      const onSubmit = async (formData) => {
        try {
          const catalogueDetails = {
            // data
          };
      const feesAndDeposit = {
        // data
      };

      const response = await updateCatalogueInfo({
        CatalogueInfo: {
          catalogueDetails,
          feesAndDeposit,
        },
        catId: catId,
      });

      if ('data' in response) {
        showRightTopAlert('success', 'Success', `${response.data.message}`);
        refetch();
      } else {
        // error handling
      }
    } catch (error) {
      // error handling
    }
};

  return (
    <div>
      {isLoading ? (
        <Loader />
      ) : (
        <FBForm onSubmit={handleSubmit(onSubmit)} defaultValues={defaults}>
          {/* all the fields, registered using the `register` method */}
        </FBForm>
      )}
    </div>
  );
};

export default GeneralDetails;