javascript - React：SubmitForm 中的无效钩子调用，自定义钩子 useSendFormData

Question

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

钩取

• 来自 SubmitForm 的数据

• 网址：字符串，

• 方法：post 或 put

• 成功：如果成功则成功消息

• id：不是必需的，但如果项目有 id 我被添加到 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()

我收到一个错误：

无法解构“未定义”的属性“formData”，因为它未定义

我怎样才能完成这项工作，如果您看到任何改进此自定义挂钩的方法，我将非常感谢您的帮助和时间。

标签： javascriptreactjsoptimizationreact-hooksreact-hook-form

Answer 1

一旦调用钩子，您设计钩子的方式就会完成获取。相反，您应该sendFormData在钩子中定义一个函数并将其与数据状态（或您需要的任何其他变量）一起返回。既然你想response.data被退回，我将函数调整为 return 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();
};