如何解决如何调用/手动调用响应路由器DOM链接
我想做的高级任务是在函数调用中从react-router-dom调用Link。
我的用例:我有一个提交按钮,单击该按钮将调用POST API。我想检查POST API的响应,如果调用成功,它将转到我的链接到成功提交页面。如果是错误,我想调用“链接到我的错误”页面。要考虑的因素之一是POST API大约需要2秒钟才能响应。
理想情况下,我希望链接组件不直接位于提交按钮组件上。一旦我的API响应后,单击包含链接组件的按钮,我想调用一个函数。
这是我当前的代码:
function SubmitFcn(){
const submitPostAPI = (async () => {await axios({
//data passed
})
.then(function (response) {
//here is where I capture the API response
})
.catch(function (error) {});
});
return (
<div>
<Link to="/SubmitPage" style={{ textDecoration: "none" }}>
<Button
disabled={btnDisabled}
id="submitButtonFormPOST"
variant="contained"
color="primary"
onClick={submitPostAPI}
data-testid="submitButtonelement"
>
{" "}
Submit
</Button>
</Link>
</div>
);
}
}
这是我希望我的代码看起来像的东西,问题是由于我未正确调用Link组件而无法编译。
function SubmitFcn(){
const submitPostAPI = (async () => {await axios({
//data passed
})
.then(function (response) {
//here is where I capture the API response
LinkFunction(response.status)
})
.catch(function (error) {});
});
return (
<div>
<Link to="/SubmitPage" style={{ textDecoration: "none" }}>
<Button
disabled={btnDisabled}
id="submitButtonFormPOST"
variant="contained"
color="primary"
onClick={submitPostAPI}
data-testid="submitButtonelement"
>
{" "}
Submit
</Button>
</Link>
</div>
);
}
}
function LinkStatus(result){
if(result === 201){
<Link to="/Submitsucess"/>}
else{
<Link to="/ErrorPage:/>
}
}
解决方法
通过route props或useHistory
反应钩子提供的{
"errorMessage": "Unable to import module 'lambda_function': \n\nIMPORTANT: PLEASE READ THIS FOR ADVICE ON HOW TO SOLVE THIS ISSUE!\n\nImporting the numpy C-extensions failed. This error can happen for\nmany reasons,often due to issues with your setup or how NumPy was\ninstalled.\n\nWe have compiled some common reasons and troubleshooting tips at:\n\n https://numpy.org/devdocs/user/troubleshooting-importerror.html\n\nPlease note and check the following:\n\n * The Python version is: Python3.7 from \"/var/lang/bin/python3.7\"\n * The NumPy version is: \"1.19.1\"\n\nand make sure that they are the versions you expect.\nPlease carefully study the documentation linked above for further help.\n\nOriginal error was: No module named 'numpy.core._multiarray_umath'\n","errorType": "Runtime.ImportModuleError"
}
对象使用history.push("/submitSuccess")
或history.push("/errorPage")
。
您可能还希望移除包裹按钮的history
,因为这可能会干扰此组件的安装状态。
如果该组件是直接由Link
组件渲染的,则它将接收路线道具,因此只需从props对象访问Route
history
否则请使用props.history
react钩子
useHistory
因此组件可能看起来与其中任何一个相似
const history = useHistory();
或
const MyComponent = ({ history }) => {
const submitPostAPI = async () => {
await axios({
//data passed
})
.then(function (response) {
linkStatus(response.status);
})
.catch(function (error) {
history.push("/errorPage"); // <-- go to error page here as well
});
};
function linkStatus(result) {
if (result === 201) {
history.push("/submitSuccess");
} else {
history.push("/errorPage");
}
}
return (
<div>
<Button
disabled={btnDisabled}
id="submitButtonFormPOST"
variant="contained"
color="primary"
onClick={submitPostAPI}
data-testid="submitButtonelement"
type="button"
>
Submit
</Button>
</div>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。