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

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()

我收到一个错误：

无法解构“未定义”的属性“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();
};