如何在reactjs中连接登录API

Question

我正在创建用于练习的登录表单。 我需要连接在线API。 我不知道热连接登录 API 。 我只是连接只获取数据 API 而无法连接登录 API。 我有设计但无法连接 API。我在“反应”中工作：“^16.12.0”。 使用反应钩子

enter code here

import React, { useState } from "react";
import { Wrapper } from "./vehiclesTableStyles";
import { PostData } from "./postData";

function VehiclesTable() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");

const submitForm = e => {
e.preventDefault();

PostData(username, password).then(result => {
  console.log(result);
});
console.log("username", username);
console.log("password", password);
};
return (

<Wrapper>
  <div className="search_box">
    <form onSubmit={submitForm}>
      <input
        name="name"
        type="text"
        placeholder="username"
        onChange={e => setUsername(e.target.value)}
      />
      <input
        name="password"
        type="password"
        placeholder="search"
        onChange={e => setPassword(e.target.value)}
      />
      <input type="submit" value="login" />
    </form>
  </div>
</Wrapper>
);
}

export default VehiclesTable;



export function PostData(userData) {
let BaseUrl = "https://reqres.in//api/login";
console.log("userData", userData);
return new Promise((resolve, reject) => {
fetch(BaseUrl, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json"
  }
  // body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(responseJson => {
    resolve(responseJson);
  })
  .catch(error => {
    reject(error);
  });
});
}

Answer 1

我正在创建语法错误 'reqres.in//api/login' 正确的是 'reqres.in/api/login' 并且还将电子邮件和密码作为数组发送。 那我应该作为对象发送。 像这样{电子邮件，密码}

Answer 2

我也有同样的问题。 检查下面的代码。 您在调用 api 时在代码中犯了一些错误。 您需要调用 React 生命周期钩子，这是最好的方法。

 enter code here import React, { useState } from "react"; import { Wrapper } from "./vehiclesTableStyles"; import { PostData } from "./postData"; function VehiclesTable() { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const submitForm = e => { e.preventDefault(); PostData(username, password).then(result => { console.log(result); }); console.log("username", username); console.log("password", password); }; return ( <Wrapper> <div className="search_box"> <form onSubmit={submitForm}> <input name="name" type="text" placeholder="username" onChange={e => setUsername(e.target.value)} /> <input name="password" type="password" placeholder="search" onChange={e => setPassword(e.target.value)} /> <input type="submit" value="login" /> </form> </div> </Wrapper> ); } export default VehiclesTable; export function PostData(userData) { let BaseUrl = "https://reqres.in//api/login"; console.log("userData", userData); return new Promise((resolve, reject) => { fetch(BaseUrl, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" } // body: JSON.stringify(userData) }) .then(response => response.json()) .then(responseJson => { resolve(responseJson); }) .catch(error => { reject(error); }); });

Answer 3

fetch(baseUrl,  
        {
        method: "POST",
        mode: 'cors', // no-cors, cors, *same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        referrer: 'no-referrer',
        headers: {
            'Content-Type': 'application/json',
            ...headers
        }
    })

使用这个基本的获取配置