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

Question

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

上钩

来自 SubmitForm 的数据
url:字符串,
方法：post或放
成功：如果成功则显示成功消息
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()

我得到一个错误：

Cannot destructure property 'formData' of 'undefined' as it is undefined

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

Answer 1

您设计挂钩的方式是在调用挂钩后完成提取。相反，您应该在钩子中定义一个 sendFormData 函数，并将其与数据状态（或您需要的任何其他变量）一起定义 return 。由于您希望 response.data 被 returned 我将函数调整为 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();
};

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

React: Invalid hook call in SubmitForm, custom hook useSendFormData

javascript

optimization

reactjs

react-hooks

react-hook-form