反应: SubmitForm中无效的钩子调用，自定义钩子useSendFormData
反应: SubmitForm中无效的钩子调用，自定义钩子useSendFormData
提问于 2021-01-28 13:52:24
我做了一个钩子useSendFormData，当我使用它时，我会收到无效的钩子调用。
钩取
- 数据来自SubmitForm
- url:string，
- 方法: post或put
- success :成功的消息如果是成功的
- 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钩子表单来处理表单。
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”进行析构，因为它是未定义的
我如何使这个工作，如果你看到任何方式改善这个定制钩子，我将非常感谢您的帮助和时间。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-28 14:41:41
按照您设计钩子的方式，一旦调用钩子，就可以完成提取。相反，您应该在钩子中定义一个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();
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65938455
复制相关文章
相似问题
腾讯云开发者
