页面没有在 React 中使用 useNavigate 更改 onClick？

Question

我有一个非常基本的 UI 登录页面：

单击 LOGIN 按钮后，将调用以下方法：

async function loginPatient(){
       let item ={username:userName, password};
       let result = await fetch("http://localhost:8000/users/login",{
           method:'POST',
           headers:{
               "Content-Type":"application/json",
               "Accept":"application/json"
           },
           body: JSON.stringify(item)
       });
        alert(result);
        alert("breakpoint")
       result = await result.json();
       localStorage.setItem("user-info",JSON.stringify(result));
       nav('/patient')
   }

此时我只想让它在单击按钮时更改页面。我的APIreturns从数据库中得到以下信息：

为了测试我在函数的第一行做了 console.log("hello world") 并且 它起作用了 但是，如果我运行 console.log("hello world") 在 let result = await fetch(...) 部分之后它不起作用。我如何测试它以了解它为什么不起作用？

以下是来自控制台的错误：

我没有写过API，也不知道Node是怎么工作的，我只是在做前端

Answer 1

首先初始化你的导航变量如下

const navigate =useNavigate()

然后通过如下返回导航变量导航到您的特定路线。

return navigation("/");

编码愉快！

Answer 2

问题是代码永远不会在获取行之后到达，基本上是请求失败，控制台上的错误是由于 CORS 问题，请求失败，而在您的 loginPatient 函数中，您没有处理失败的情况，如果您只是将 fetch 调用包装在 try/catch 块中，您将看到您的代码将落入失败块，因为 api 失败。

您需要在服务器或后端启用 CORS，Cross-Origin 资源共享 (CORS) 是一种基于 HTTP-header 的机制，允许服务器指示任何来源（域、方案或端口） ) 除了它自己的之外，浏览器应该允许从中加载资源。

您可以在以下位置阅读有关 cors 的更多信息： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

看起来您的客户端与您的服务器位于其他域或端口（如果您在本地开发）。您需要为您的客户端启用 CORS 权限 url.

如果您的后端使用 express，则可以检查以下 url 以启用 cors。 https://expressjs.com/en/resources/middleware/cors.html

最后一件事是 Postman 获得成功响应的原因，因为它是通过此 cors 检查，因为 Postman 正在从它的服务器而不是浏览器向您的直接服务器发出请求。

页面没有在 React 中使用 useNavigate 更改 onClick？

Page not changing onClick using useNavigate in React?

node.js

reactjs

json

react-fullstack