为什么我的 localhost 链接中出现问号？ https://localhost:3000/?

Question

我正在使用 React 构建一个 Web 应用程序。当我单击登录按钮并发出 http 请求时，我的 localhost 链接将添加“？”到底。 我的服务器在邮递员应用程序上运行良好，但实际上会给出 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;

Answer 1

登录表单不需要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。