Question

我做了一个钩子 useSendFormData ，当我使用它时，我得到了无效的钩子调用。

钩取

来自 SubmitForm 的数据
网址：字符串，
方法：发布或放置
成功：成功则提示成功

id：不需要但如果项目有 id i 被添加到 api 调用中。

  export const useSendFormData = async ({
           formData,
           url,
           method,
           success,
           id,
         }) => {
           const [data, setData] = useState({
             error: "",
             loading: true,
             success: "",
             data: [],
           });
           const setPartData = (partialData) => setData({ ...data, ...partialData });
           try {
             if (method === "post") {
               const { data } = await axios.post(
                 `${SERVER_API}api/v1/${url}/${id ?? ""}`,
                 formData
               );
               setPartData({ data, success, error: null });
             } else if (method === "put") {
               const { data } = await axios.post(
                 `${SERVER_API}api/v1/${url}/${id ?? ""}`,
                 formData
               );
               setPartData({ data, success, error: null });
             }

             setPartData({
               loading: false,
             });
           } catch (err) {
             const { data } = err.response;
             setPartData({
               error: data.error,
               success: null,
               loading: false,
             });
           }
           return {
             data,
           };
         };

我在提交表单中调用它，我不知道这件事但我用于处理表单react-hook-forms

 const sendFormData = useSendFormData


 const handleForm = async (info) => {
     const { data } = await sendFormData({
       formData: info,
       url: "auth/forgot-password",
       method: "post",
       success: "A password reset message has been sent to your email",
     });

     console.log(data);

     reset();
   };

如果我改变了

const sendFormData = useSendFormData

到

const sendFormData = useSendFormData()

我得到 无法解构 'undefined' 的属性 'formData'，因为它是未定义的。。我怎样才能做到这一点，如果你看到任何改进这个自定义钩子的方法，我将不胜感激感谢您的帮助和时间。

Answer 1

您设计钩子的方式一旦调用钩子就完成了获取。相反，您应该在钩子中定义一个 sendFormData 函数并将其与数据状态（或您需要的任何其他变量）一起返回。由于您希望返回 response.data，因此我修改了该函数以返回 response.data：

export const useSendFormData = () => {
  const [data, setData] = useState({
    error: "",
    loading: true,
    success: "",
    data: [],
  });

  const sendFormData = async ({
    formData,
    url,
    method,
    success,
    id,
  }) => {
    const setPartData = (partialData) => setData({ ...data, ...partialData });
    try {
      let response
      if (method === "post") {
        response = await axios.post(
          `${SERVER_API}api/v1/${url}/${id ?? ""}`,
          formData
        );
        setPartData({ data: response.data, success, error: null });
      } else if (method === "put") {
        response = await axios.post(
          `${SERVER_API}api/v1/${url}/${id ?? ""}`,
          formData
        );
        setPartData({ data: response.data, success, error: null });
      }
      setPartData({
        loading: false,
      });
      return response.data

    } catch (err) { 
      const { data } = err.response;
      setPartData({
        error: data.error,
        success: null,
        loading: false,
      });
      return data
    }
  }

  return {
    data, sendFormData
  };
};

这样您就可以在组件主体上正确调用钩子，提取 data 和 sedFormData：

// here you have your data state and sendFormData extracted
const { data, sendFormData } = useSendFormData()


const handleForm = async (info) => {
  // here you have your response.data returned
  const data = await sendFormData({
    formData: info,
    url: "auth/forgot-password",
    method: "post",
    success: "A password reset message has been sent to your email",
  });

  console.log(data);

  reset();
};

反应：SubmitForm 中的钩子调用无效，自定义钩子 useSendFormData

1 个答案: