Javascript 单击“不打印到控制台”上的“反应”按钮

我正在使用ReactJS，有一个LoginUI组件，它返回一个按钮

当我单击按钮时，它调用login方法，然后向我的服务器localhost5000发出HTTPPOST请求

然后，服务器通过API调用检索URL链接，并将其发送回我的登录组件。由于我能够控制台记录检索到的URl，所以API调用按预期工作。（console.log从我的服务器中的方法正常工作）

在我的登录函数（在loginUI组件中）中，我试图记录从服务器到控制台的响应，但没有显示任何内容，我不确定为什么会出现这种情况。我在代码中的每个console.log旁边都添加了一条注释，以突出显示那些按预期工作的

下面是我的代码的相关片段：

LoginUI组件：

const LoginUI = (props) => {
  const login = async (e) => {
    // console.log("hello"); // why don't these print?
    e.preventDefault();
    

    try {
      const response = await fetch("http://localhost:5000/login", {
        method: "POST",
        headers: {
          "Content-type": "application/json",
        },
      });
      const parseRes = await response.json(); // this should be the URL
      console.log(JSON.stringify(parseRes)); // nothing prints
    
    } catch (err) {
      console.error(err.message);
    }

  };

  return (
    <button type="button" class="btn btn-outline-primary" onClick={login}>
      Login to Spotify
    </button>
  );
};

export default LoginUI;

任何帮助都将不胜感激

---

谢谢大家!

单击按钮时无需阻止默认行为。 您的控制台日志未登录到控制台，但已被注释掉？。 添加了一些更改和注释，请尝试一下

    const LoginUI = (props) => {
      const login = async (e) => {
        try {
          const response = await fetch("http://localhost:5000/login", {
            method: "POST",
            headers: {
              "Content-type": "application/json",
            },
          });
          const parseRes = await response.json();
          console.log(parseRes); // no need to stringify it, response.json does that for you.
        
        } catch (err) {
          console.error(err.message);
        }
    
      };
    
      return (
        <button type="button" class="btn btn-outline-primary" onClick={login}>
          Login to Spotify
        </button>
      );
    };
    
    export default LoginUI;


// Code from server:
 
    app.post("/login", async (req, res) => {
      let scopes = ["user-top-read", "user-library-read", "playlist-read-private"],
        redirectUri = "http://localhost:5000/callback/",
        clientId = " ", 
        state = "http://localhost:5000/"; 
   
      let spotifyApi = new SpotifyWebApi({
        redirectUri: redirectUri,
        clientId: clientId,
      });
      // this sends the authorizeURL back to the client
      let authorizeURL = spotifyApi.createAuthorizeURL(scopes, state);
      return res.json({authorizeURL}); // send back an object so you can convert it to json properly.
     
    });

constloginui=（道具）=>{
常量登录=异步（e）=>{
试一试{
const response=等待获取（“http://localhost:5000/login", {
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
},
});
const parsers=wait response.json（）；
console.log（parsers）；//无需对其进行字符串化，response.json会为您完成这项工作。
}捕捉（错误）{
控制台错误（错误消息）；
}
};
返回(
登录Spotify
);
};
导出默认登录；
//来自服务器的代码：
app.post（“/login”），异步（请求、回复）=>{
让作用域=[“用户顶部读取”、“用户库读取”、“播放列表读取专用”]，
重定向URI=”http://localhost:5000/callback/",
clientId=“”，
州=”http://localhost:5000/"; 
让spotifyApi=新的SpotifyWebApi({
重定向URI:redirectUri，
clientId:clientId，
});
//这会将授权URL发送回客户端
让authorizeURL=spotifyApi.createAuthorizeURL（范围、状态）；
return res.json（{authorizeURL}）；//发回一个对象，这样您就可以将它正确地转换为json。
});

尝试删除e.preventDefault（），你是说即使是第一个

console.log（'hello'）

也没有输出吗？您是否已在网络面板中验证您正在从API获得响应？

    const LoginUI = (props) => {
      const login = async (e) => {
        try {
          const response = await fetch("http://localhost:5000/login", {
            method: "POST",
            headers: {
              "Content-type": "application/json",
            },
          });
          const parseRes = await response.json();
          console.log(parseRes); // no need to stringify it, response.json does that for you.
        
        } catch (err) {
          console.error(err.message);
        }
    
      };
    
      return (
        <button type="button" class="btn btn-outline-primary" onClick={login}>
          Login to Spotify
        </button>
      );
    };
    
    export default LoginUI;


// Code from server:
 
    app.post("/login", async (req, res) => {
      let scopes = ["user-top-read", "user-library-read", "playlist-read-private"],
        redirectUri = "http://localhost:5000/callback/",
        clientId = " ", 
        state = "http://localhost:5000/"; 
   
      let spotifyApi = new SpotifyWebApi({
        redirectUri: redirectUri,
        clientId: clientId,
      });
      // this sends the authorizeURL back to the client
      let authorizeURL = spotifyApi.createAuthorizeURL(scopes, state);
      return res.json({authorizeURL}); // send back an object so you can convert it to json properly.
     
    });