Axios多次请求get和post请求错误

Question

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Navigate, Link } from "react-router-dom";
import gravatarUrl from "gravatar-url";
import "../assets/css/profile.css";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import API from "../backend";
import { isAutheticated } from "../auth";
let img;
const Profile = () => {
// setting values
const [data, setData] = useState({
email: "",
name: "",
city: "",
state: "",
phone: "",
country: "",
role: "",
reg: "",
error: "",
success: "",
});
// state to know if someone clicked on the edit button
const [edit, setEdit] = useState(false);
// handaling onchange event
const onHandleChange = (val) => (event) => {
setUpdate({ ...update, [val]: event.target.value });
};
// Updating the new value from input
const [update, setUpdate] = useState({
name: "",
city: "",
state: "",
phone: "",
country: "",
error: "",
});
// state to check if someone click on submit
const [didSubmit, setDidSubmit] = useState(false);
// destructuring values from data (useState)
const { email, name, city, state, phone, country, reg, role } = data;
// destructuring token from localstorage
const { token } = isAutheticated();
// dataObject for api call
const dataType = {
headers: {
authorization: `Bearer ${token}`,
},
};
// get api call
const axiosGetCall = async () => {
try {
const res = await Axios.get(`${API}/user/profile`, dataType);
// seting image
img = gravatarUrl(res.data.user.email, { size: 200 });
// set data
setData({
...data,
email: res.data.user.email,
name: res.data.user.name,
city: res.data.user.city,
state: res.data.user.state,
phone: res.data.user.phone,
country: res.data.user.country,
role: res.data.user.role,
reg: res.data.user.createdAt,
success: true,
});
} catch (error) {
console.log(`error log: `, error);
setData({
...data,
error: error.response.data.error,
success: false,
});
}
};
// post call/update
const axiosUpdateCall = async () => {
// token
const { token1 } = isAutheticated();
// new dataObject for post call
const dataToken = {
headers: {
authorization: `Bearer ${token1}`,
},
};
try {
const res = await Axios.post(`${API}/user/profileEdit`, dataToken);
console.log(`res:`, res);
} catch (error) {
console.log(`error log: `, error);
setData({
...data,
error: error.response.data.error,
success: false,
});
}
};
// For get api call
useEffect(() => {
axiosGetCall();
}, []);
// for post api call if some clicked on submit
useEffect(() => {
if (didSubmit) {
axiosUpdateCall();
}
}, [didSubmit]);
// prevent default
const onSubmit = (event) => {
event.preventDefault();
setDidSubmit(true);
};
// Normal profile HTML CODE
const profileMain = () => {
return (
<div className="container bootdey flex-grow-1 container-p-y">
<div className="media align-items-center py-3 mb-3">
<img src={img} alt="" className="d-block ui-w-100 rounded-circle" />
<div className="media-body ml-4">
<h4 className="font-weight-bold mb-0">
{name.charAt(0).toUpperCase() + name.slice(1)}
</h4>
<button
onClick={() => {
setEdit(true);
}}
className="btn btn-primary btn-sm"
>
Edit
</button>
&nbsp;
<Link to="" className="btn btn-primary btn-sm">
Go back
</Link>
&nbsp;
</div>
</div>
<div className="card mb-4">
<div className="card-body">
<table className="table user-view-table m-0">
<tbody>
<tr>
<td>Registered:</td>
<td>{reg.slice(0, 10)}</td>
</tr>
<tr>
<td>Verified:</td>
<td>
<span className="fa fa-check text-primary"></span>&nbsp; No
</td>
</tr>
<tr>
<td>Role:</td>
<td>{role.charAt(0).toUpperCase() + role.slice(1)}</td>
</tr>
<tr>
<td>Status:</td>
<td>
<span className="badge badge-outline-success">Active</span>
</td>
</tr>
</tbody>
</table>
</div>
<hr className="border-light m-0" />
</div>
<div className="card">
<hr className="border-light m-0" />
<div className="card-body">
<h6 className="mt-4 mb-3">Personal Details:</h6>
<table className="table user-view-table m-0">
<tbody>
<tr>
<td>Full Name:</td>
<td>{name.charAt(0).toUpperCase() + name.slice(1)} </td>
<td></td>
</tr>
<tr>
<td>Email:</td>
<td>{email}</td>
</tr>
<tr>
<td>Phone:</td>
<td>{phone}</td>
</tr>
<tr>
<td>City:</td>
<td>{city}</td>
</tr>
<tr>
<td>State:</td>
<td>{state}</td>
</tr>
<tr>
<td>Country:</td>
<td>{country}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
);
};
// Profile when someone clicked on edit
const profileEdit = () => {
return (
<>
<div className="container bootdey flex-grow-1 container-p-y">
<div className="media align-items-center py-3 mb-3">
<img src={img} alt="" className="d-block ui-w-100 rounded-circle" />
<div className="media-body ml-4">
<h4 className="font-weight-bold mb-0">
{name.charAt(0).toUpperCase() + name.slice(1)}
</h4>
&nbsp; &nbsp;
</div>
</div>
<div className="card mb-4">
<div className="card-body">
<table className="table user-view-table m-0">
<tbody>
<tr>
<td>Registered:</td>
<td>{reg.slice(0, 10)}</td>
</tr>
<tr>
<td>Verified:</td>
<td>
<span className="fa fa-check text-primary"></span>&nbsp;
No
</td>
</tr>
<tr>
<td>Role:</td>
<td>{role.charAt(0).toUpperCase() + role.slice(1)}</td>
</tr>
<tr>
<td>Status:</td>
<td>
<span className="badge badge-outline-success">
Active
</span>
</td>
</tr>
</tbody>
</table>
</div>
<hr className="border-light m-0" />
</div>
<div className="card">
<hr className="border-light m-0" />
<div className="card-body">
<h6 className="mt-4 mb-3">Personal Details:</h6>
<table className="table user-view-table m-0">
<tbody>
<tr>
<td>Full Name:</td>
<td>
<div className="col-3">
<input
type="text"
className="form-control"
onChange={onHandleChange("name")}
defaultValue={name}
/>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Email:</td>
<td>{email}</td>
</tr>
<tr>
<td>Phone:</td>
<td>
<div className="col-3">
<input
type="text"
className="form-control"
onChange={onHandleChange("phone")}
defaultValue={phone}
/>
</div>
</td>
</tr>
<tr>
<td>City:</td>
<td>
<div className="col-3">
<input
type="text"
className="form-control"
onChange={onHandleChange("city")}
defaultValue={city}
/>
</div>
</td>
</tr>
<tr>
<td>State:</td>
<td>
<div className="col-3">
<input
type="text"
className="form-control"
onChange={onHandleChange("state")}
defaultValue={state}
/>
</div>
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<div className="col-3">
<input
type="text"
className="form-control"
onChange={onHandleChange("country")}
defaultValue={country}
/>
</div>
</td>
</tr>
</tbody>
</table>
<button onClick={onSubmit} className="btn btn-primary btn-sm">
Submit
</button>
&nbsp;&nbsp;&nbsp;
<button
onClick={() => {
setEdit(false);
}}
className="btn btn-primary btn-sm"
>
Cancel
</button>
</div>
</div>
</div>
</>
);
};
// toast to show error
const errorToast = () => {
toast(`${update.error}`, {
position: "top-right",
autoClose: false,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
});
};
return (
<>
<ToastContainer
position="top-right"
autoClose={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
theme="colored"
/>
{/* {error && (
<>
<Navigate to="/signout" />
</>
)} */}
{edit === true ? (
<>
{profileEdit()} <br />
</>
) : (
<>
{profileMain()} <br />
</>
)}
</>
);
};
export default Profile;

我正在调用两个API调用…

1. get request，一切正常
2. post请求，这里我无法将令牌发送到后端.

我使用相同的方法来获取请求，它工作正常，但是当在post请求上使用相同的方法时，我无法发送令牌。

我错过了什么吗?

我在每一行代码中都添加了注释。我的英语很差。对不起，祝你今天愉快。

Answer 1

Axios.post()的第二个参数用于POST数据，您在那里设置标题。传递一个空对象(如果你想有空的POST数据)，并移动你的标题(dataToken)到第三个参数:

const res = await Axios.post(`${API}/user/profileEdit`, {}, dataToken);
//                                                      ^set POST data here

来自文档:

axios。Post (url[， data[， config]])