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

Question

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

钩花

• from SubmitForm

• url:字符串,

• 方法:post或put

• 成功:如果成功，则返回成功消息

• id:不需要，但如果物品有idI被添加到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'，因为它是undefined

我怎样才能使这个工作，如果你看到任何改进这个自定义钩子的方法，我将非常感谢你的帮助和时间。

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