React JS fetch data from api
Question
Why i can't post data to api my booking? the error code is index.js:40 POST https://gotravel-production.up.railway.app/api/v1/booking 401
this my login page code:
import React, { useState, useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import NavbarHeader from "../Header/Navbars";
import { Navigate } from "react-router-dom";
import { GoogleLogin, GoogleOAuthProvider } from "@react-oauth/google";
import jwtDecode from "jwt-decode";
async function doLogin({ username, password }) {
// Gunakan endpoint-mu sendiri
const response = await fetch(
"https://gotravel-production.up.railway.app/api/v1/login",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username,
password,
}),
}
);
const data = await response.json();
return data.token;
}
async function doLoginGoogle(res, email) {
// Gunakan endpoint-mu sendiri
const response = await fetch(
"https://gotravel-production.up.railway.app/api/v1/google",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
token: res,
}),
}
);
const data = await response.json();
console.log(data);
return data.accessToken;
}
function Login() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const token = localStorage.getItem("token");
const GOOGLECLIENTID =
"1075166577960-u21r9932mfr51s1uiq3mbc5v5k15uu96.apps.googleusercontent.com";
useEffect(() => {
setIsLoggedIn(!!token);
}, [token]);
function handleSubmit(e) {
setIsLoading(true);
e.preventDefault();
doLogin({ username, password })
.then((user) => {
if (!user) {
setError(user.message);
} else {
localStorage.setItem("token", user);
}
})
.catch((err) => err.message)
.finally(() => setIsLoading(false));
}
const haldleSuccessGoogle = (response) => {
const userData = jwtDecode(response.credential);
// const response = await fetch("https://challenge-8-be-fsw-production.up.railway.app/api/v1/google"
if (response.credential) {
doLoginGoogle(response.credential, userData.email)
.then((token) => {
if (!token) {
setError("TOKEN TIDAK ADA");
} else {
localStorage.setItem("token", token);
setIsLoggedIn(token);
}
})
.catch((err) => err.message)
.finally(() => setIsLoading(false));
}
};
// function handleLogout(e) {
// setIsLoading(true);
// e.preventDefault();
// localStorage.removeItem("token");
// setIsLoggedIn(false);
// setIsLoading(false);
// }
return (
<div className="bgLogin">
<NavbarHeader />
<br />
<br />
<Container>
<div className="row">
<div className="col-7"></div>
{!isLoggedIn ? (
<div className="col-5">
<h2>Masuk</h2>
<p>
Belum punya akun? <a href="/register">Daftar disini</a>
</p>
<form onSubmit={handleSubmit}>
<div className="mb-3 h6">
<label htmlFor="username" className="form-label">
Username
</label>
<input
type="text"
className="form-control bg-transparent formInput"
id="username"
onChange={(e) => setUsername(e.target.value)}
value={username}
placeholder="your username"
/>
</div>
<div className="mb-3 h6">
<label htmlFor="passwd" className="col-sm-2 col-form-label">
Password
</label>
<input
type="password"
className="form-control bg-transparent formInput"
id="password"
onChange={(e) => setPassword(e.target.value)}
value={password}
placeholder="your password"
/>
</div>
<a href="/" className="forgot">
Back to the site
</a>
<br />
<br />
<div className="d-grid gap-2">
<input
type="submit"
value={isLoading ? "Loading" : "Login"}
/>
</div>
<p>Atau masuk dengan</p>
<div className="d-grid gap-2">
<GoogleOAuthProvider clientId={GOOGLECLIENTID}>
<GoogleLogin
buttonText="Login with Google"
onSuccess={(res) => {
haldleSuccessGoogle(res);
}}
onError={() => {
haldleSuccessGoogle("Error");
}}
cookiePolicy={"single_host_origin"}
/>
</GoogleOAuthProvider>
</div>
</form>
</div>
) : (
<Navigate to="/" />
)}
</div>
</Container>
</div>
);
}
export default Login;
and this is my booking page code:
import React, { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Header from "../Header";
import Footer from "../Footer";
import { Container } from "react-bootstrap";
import { useLocation } from "react-router-dom";
import { Link } from "react-router-dom";
const BayarTiket = () => {
const location = useLocation();
const dataBooking = location.state;
console.log(dataBooking);
const [flight, setflight] = useState([]);
const [user, setUser] = useState([]);
useEffect(() => {
fetch("https://gotravel-production.up.railway.app/api/v1/flight")
.then((response) => response.json())
.then((data) => {
setflight(data.data.flights);
console.log(data.data.flights);
})
.catch((err) => {
console.log("err", err);
});
fetch("https://gotravel-production.up.railway.app/api/v1/profile")
.then((response) => response.json())
.then((data) => {
setUser(data);
console.log(data);
})
.catch((err) => {
console.log("err", err);
});
}, []);
console.log(user);
async function booking() {
// Gunakan endpoint-mu sendiri
const response = await fetch(
"https://gotravel-production.up.railway.app/api/v1/booking",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id_flight: `${dataBooking.data.item.id_plane}`,
baggage: `${dataBooking.baggageWeight}`,
food: `${dataBooking.typeFood}`,
name: `${dataBooking.name}`,
homephone: `${dataBooking.homePhone}`,
mobilephone: `${dataBooking.mobilePhone}`,
totalprice: `${dataBooking.data.item.price}`,
}),
}
);
const data = await response.json();
return data;
}
return (
<div className="bayarTiket">
<Header />
<Container>
<div className="row" style={{ paddingTop: "10px" }}>
<div className="col-lg-12" key={dataBooking.data.item.id}>
<nav
className="navbar navbar-expand-lg"
style={{ backgroundColor: "#4E4E4E" }}
>
<div className="container-fluid row">
<div className="col-lg-7">
<a
className="navbar-brand"
href="#/"
style={{ color: "#FFFFFF" }}
>
Booking
</a>
</div>
<div className="col-lg-2">
<a
href="#/"
className="nav-link"
style={{ color: "#FFFFFF" }}
>
Pilih Tiket
</a>
</div>
<div className="col-lg-2">
<a
href="#/"
className="nav-link"
style={{ color: "#FFFFFF" }}
>
Pesanan Tiket
</a>
</div>
<div className="col-lg-2">
<a
href="#/"
className="nav-link active"
style={{ color: "#FFFFFF" }}
>
Bayar
</a>
</div>
</div>
</nav>
<h2 style={{ marginTop: "40px" }}>
<img
src="assets/img/park-tickets-couple 1.png"
alt="tiket"
style={{ paddingRight: "15px" }}
/>
Metode Pengiriman
</h2>
<section style={{ marginLeft: "60px", paddingLeft: "15px" }}>
<h3>Tiket Elektronik</h3>
<p>
Inilah cara hemat waktu dan tanpa kertas untuk bepergian. Anda
akan menerima referensi tiket elektronik melalui e-mail.
</p>
<p>{dataBooking.data.item.id_plane}</p>
<p>{dataBooking.data.available_seats}</p>
<p>{dataBooking.baggageWeight}</p>
<p>{dataBooking.typeFood}</p>
<p>{dataBooking.name}</p>
<p>{dataBooking.homePhone}</p>
<p>{dataBooking.mobilePhone}</p>
<p>{dataBooking.data.item.price}</p>
</section>
<h2 style={{ paddingTop: "20px" }}>
<img
src="assets/img/card.png"
alt=""
style={{ paddingRight: "15px" }}
/>
Pembayaran
</h2>
<div
style={{
textAlign: "center",
width: "1050px",
height: "70px",
marginLeft: "70px",
backgroundColor: "#9f9f9f",
borderRadius: "8px",
}}
className="tbayar"
>
<p style={{ paddingTop: "20px" }}>
Jumlah yang harus di bayar adalah IDR{" "}
{dataBooking.data.item.price * dataBooking.data.dataForm.capacity}
</p>
</div>
<section style={{ marginLeft: "60px", paddingLeft: "15px" }}>
<h3>Pembayaran Online</h3>
<p>
Pembayaran Online Anda akan dialihkan ke halaman eksternal bila
mengklik tombol Konfirmasi perjalanan. Metode pembayaran yang
tersedia antara lain:
</p>
<ul>
<li>
<p>Internet Banking</p>
</li>
<li>
<p>Kartu Kredit (Visa, Master, JCB)</p>
</li>
<li>
<p>Kartu Debit</p>
</li>
</ul>
</section>
<button
className="btn_bayar"
onClick={booking}
style={{
borderRadius: "26px",
width: "250px",
height: "50px",
marginLeft: "450px",
color: "#ffff",
}}
>
Bayar
</button>
</div>
</div>
</Container>
<br />
<br />
<Footer />
</div>
);
};
export default BayarTiket;
idk why my token is not readable. Help me master
idk why my token is not readable. Help me master idk why my token is not readable. Help me master idk why my token is not readable. Help me master idk why my token is not readable. Help me master idk why my token is not readable. Help me master idk why my token is not readable. Help me master
idk why my token is not readable. Help me master
idk why my token is not readable. Help me master
idk why my token is not readable. Help me master
idk why my token is not readable. Help me master
idk why my token is not readable. Help me master
idk why my token is not readable. Help me master
1 answers
solution1
0 2022-12-20 19:46:04
In your Login, localStorage.getItem is asynchronous and will be "undefined" if you don't await the the results. You can replace the line:
const token = localStorage.getItem("token");
...with:
const [token, setToken] = useState(null);
(async () => {
const result = await localStorage.getItem("token");
setToken(result);
})();
I am not sure that this is your only issue, but this should retrieve "token" from Local Storage if it is there.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
React js fetch all data from a paginated api with react hooks
How to fetch data from API for multiple items in React JS component
How can I fetch data from yelp api in React JS?
Fetch data from API in React and visualize it using Chart.Js
React JS fetch data from multiple API function
Fetch specific data from external api in React JS
how to fetch api data using react js
Fetch Detail from API in React JS
React js fetch API
Fetch data from API when form's search button clicked and show data on another page in React JS
Related Tags