Hey there! Let's walk through the most likely reasons your login button isn't giving any feedback—whether the credentials are right or wrong. It's super frustrating when UI actions don't communicate what's happening, so let's break this down step by step.

1. First: Check for Console Errors #

Before diving into code logic, open your browser's DevTools (F12) and head to the Console tab. Look for any JavaScript errors (red text)—things like undefined variables, invalid fetch URLs, or syntax mistakes will stop your login handler dead in its tracks without any visible feedback.

2. Verify the Login Button's Click Binding #

If the button isn't triggering your login function at all, the issue is likely with how you've bound the onClick event. Common mistakes here:

• Accidentally invoking the function immediately instead of passing a reference:

  // ❌ Wrong: Runs handleLogin when the component renders, not on click
  <button onClick={this.handleLogin()}>Login</button>
  
  // ✅ Correct: Passes the function reference to run on click
  <button onClick={() => this.handleLogin(username, password)}>Login</button>
  

• For class components, forgetting to bind this to your handler. Fix this in one of two ways:
  • Use arrow function syntax for the handler (auto-binds this):

    handleLogin = (username, password) => {
      // Your login logic here
    }
    

  • Bind in the constructor:

    constructor(props) {
      super(props);
      this.handleLogin = this.handleLogin.bind(this);
    }
    

3. Fix Your Fetch Request Configuration #

Looking at your code snippet, your defaultFetchOptions is missing critical parts that could prevent the request from working properly:

• Missing Content-Type header: If you're sending JSON data to the backend, you need to tell the server what format you're using. Add this to your headers:

  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json' // Required for JSON payloads
  }
  

• No request body: You need to stringify your username/password and pass it as the body of the POST request:

  const defaultFetchOptions = {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password }) // Add this line!
  };
  

4. Add Proper Error Handling for Fetch #

A common gotcha with the Fetch API: it only rejects on network errors, not HTTP errors like 401 (unauthorized) or 500 (server error). That means even if your backend returns a "wrong password" response, your .then() will still run unless you explicitly check the response status.

Update your fetch logic to handle both success and failure cases, and update your component state to show feedback:

handleLogin = async (username, password) => {
  try {
    const response = await fetch(config.loginUrl, {
      ...defaultFetchOptions,
      body: JSON.stringify({ username, password })
    });

    if (!response.ok) {
      // Handle HTTP errors (e.g., wrong credentials)
      const errorData = await response.json();
      this.setState({ errorMessage: errorData.message || 'Invalid credentials' });
      return;
    }

    // Login success: Update state to show LoggedIn component
    const userData = await response.json();
    this.setState({ 
      isLoggedIn: true,
      errorMessage: '' // Clear any previous errors
    });
  } catch (networkError) {
    // Handle network issues (e.g., no internet)
    this.setState({ errorMessage: 'Failed to connect to server. Please try again.' });
    console.error('Login network error:', networkError);
  }
};

5. Render Feedback to the User #

Finally, you need to display the error or success message in your UI. Make sure your component state tracks errorMessage (and optionally successMessage), then pass this to your LoggedOut component or render it directly:

render() {
  const { isLoggedIn, errorMessage } = this.state;

  if (isLoggedIn) {
    return <LoggedIn />;
  }

  return (
    <div>
      <LoggedOut onLogin={this.handleLogin} />
      {/* Show error message if it exists */}
      {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
    </div>
  );
}

Start with checking the console for errors—they'll often point you straight to the problem. Then work through the binding, fetch config, error handling, and UI rendering steps, and you should start seeing feedback for your login attempts in no time!

内容的提问来源于stack exchange，提问作者lex