反应按钮 onClick 不打印到控制台

Question

I'm working with ReactJS and have a LoginUI component which returns a button.

When I click the button, it calls the login method which then makes an HTTP post request to my server localhost5000.

The server then retrieves a URL link through an API call and sends it back to my login component. The API call works as expected since I was able to console log the URl retrieved. (console.log is working properly from the method in my server)

In my login function (in loginUI component) I'm trying to log the response from the server to the console but nothing is showing up and I'm not exactly sure why that is the case. I've added a comment next to each console.log in my code to highlight the ones that work as expected.

Below are relevant snippets of my code:

LoginUI component:

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;

Code from server:

// this method generates a URL that directs the user to an authorization page

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);
  console.log(authorizeURL); // this will log the URL to the console as expected
  return res.json(authorizeURL);
 
});

Any help would be greatly appreciated!

Thank you!

Answer 1

No need to prevent default behavior when clicking a button. Your console log wasnt getting logged to the console but it was commented out?. Added some changes and comments, give this a try.

    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.
     
    });