如何解决对功能组件做出承诺
我有一个功能组件,我想将数据保存在输入表单中,并使用saveForm方法将其发送到我的Java API。
我如何在功能组件中读取此承诺的响应 props.saveForm(以查找潜在的服务器错误)?我已经读过,在这些情况下,必须使用 useEffect 挂钩。.但是,如果将handleSubmitForm()移到useEffect内,则抛出onSubmit事件时将无法调用它。
请赐教。 谢谢您的智慧。
我在其他问题中发现的代码:
useEffect(() => {
const saveForm= async () => { //!but like this is not fired on the onSubmit event!
const result = await axios.get(`/api/formpage/${id}`);
setData(result.data.inputs);
};
fetchInitialData();
},[]);
我现在的代码:
const handleSubmitForm= (e) => {
e.preventDefault();
props.saveForm(newData,props.history);
};
return (
<div>
<Styles>
<form onSubmit={handleSubmitForm}>
.....
<input ..... />
<input ..... />
.....
</form>
</Styles>
</div>
);
actions.js:
export const saveForm= (newData) => async (dispatch) => {
try {
const res = await axios.post("/api/formexample",newData);
dispatch({//this dispatch is to clean past errors if now are resolved
type: GET_ERRORS,payload: {},});
} catch (err) {
dispatch({
type: GET_ERRORS,payload: err.response.data,});
}
};
解决方法
您不必将handleSubmitForm
放在useEffect
中。此功能用于响应按钮单击,因此无效。
您可以使函数handleSubmitForm
异步并等待。
const handleSubmitForm = async (e) => {
e.preventDefault();
const result = await callValidation(data));
// check your result
};
我不确定您如何检查验证,所以这只是一个例子。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。