为什么我的本地主机链接中有一个问号？ https://localhost:3000/?

如何解决为什么我的本地主机链接中有一个问号？ https://localhost:3000/?

我正在使用 React 构建 Web 应用程序。当我单击登录按钮并发出 http 请求时，我的本地主机链接将添加“？”到底。我的服务器在邮递员应用程序上运行良好，但实际上会给出 204 作为对我的登录请求的响应。所以我现在无法登录。

下面是我的“Login.js”代码

对于我造成的任何混淆，我深表歉意。提前感谢您的帮助。

enter code here
import React from "react";
import { Link,withRouter } from "react-router-dom";
import "./Login.css";
import axios from "axios";

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",password: "",errorMessage: "",isLoggedin: false,};
    this.handleInputValue = this.handleInputValue.bind(this);
    // this.handleLogin = this.handleLogin.bind(this);
  }

  handleInputValue = (key) => (e) => {
    this.setState({ [key]: e.target.value });
  }

  handleLogin = () => {
    const { email,password } = this.state;
    // if (!this.state.email || !this.state.password) {
    //   this.setState({ errorMessage: "Please check your email and password again." });
    // } else {
    axios.post("https://server.slowtv24.com/login",{ email: email,password: password },{ withCredentials: true }
    )
      .then((res) => {
        console.log("login post res>>>",res);
        // this.setState({
        //   isLoggedin: true,// })
      })
    // }
  }

  render() {
    return (
      <div>
        <div className="login">
          <div className="login-half left">
            <form>
              <input type="text" placeholder="Enter email address" onChange={this.handleInputValue("email")} />
              <input type="password" placeholder="Enter password" onChange={this.handleInputValue("password")} />
              <button onClick={this.handleLogin}>Login</button>
            </form>
          </div>
          <div className="bar bar-top"></div>
          <span className="login-or">OR</span>
          <div className="bar bar-bottom"></div>
          <div className="login-half right">
            <button>Login with GitHub</button>
            <button>Login with Gmail</button>
          </div>
        </div>
      </div>
    )
  };
}

export default Login;

解决方法

登录表单不需要 form 标记，因为您正在处理 onClick 事件中的提交操作。

render() {
    return (
      <div>
        <div className="login">
          <div className="login-half left">
            <input type="text" placeholder="Enter email address" onChange={this.handleInputValue("email")} />
            <input type="password" placeholder="Enter password" onChange={this.handleInputValue("password")} />
            <button onClick={this.handleLogin}>Login</button>
          </div>
          <div className="bar bar-top"></div>
          <span className="login-or">OR</span>
          <div className="bar bar-bottom"></div>
          <div className="login-half right">
            <button>Login with GitHub</button>
            <button>Login with Gmail</button>
          </div>
        </div>
      </div>
    )
  };

关于问号，您可以在按钮上添加 type="button"。查看 this 了解更多信息。