React JS fetch post get error object对象错误

Question

Post api work postman正确，但Rect JS Post不工作。控制台得到这个错误"POST https://localhost:5001/api/request 400(错误的请求)"． 我尝试了几次更改fetch到axio post，但它不工作。我是react js的初学者。我不知道该怎么做。我把我的代码附在这上面。请帮我一下，这件事很重要。

import React,{useState} from 'react';
import { variables } from "../../Variables";

const  Request =() =>{
const [request_user_name, set_request_user_name] = useState('')
const [request_first_name, set_request_first_name] = useState('')
const [request_gender, set_request_gender] = useState('')
const [request_last_name, set_request_last_name] = useState('')
const [request_phone, set_request_phone] = useState('')
const [request_email, set_request_email] = useState('')
const [request_spotify, set_request_spotify] = useState('')
const [request_itunes, set_request_itunes] = useState('')
const [request_youtube, set_request_youtube] = useState('')
const [request_facebook, set_request_facebook] = useState('')
const [request_instagram, set_request_instagram] = useState('')
const handleUsername = (e)=>{
set_request_user_name(e.target.value)
}
const handleFirstname = (e)=>{
set_request_first_name(e.target.value)
}
const handleLastname = (e)=>{
set_request_last_name(e.target.value)
}
const handlePhone = (e)=>{
set_request_phone(e.target.value)
}
const handleEmail = (e)=>{
set_request_email(e.target.value)
}
const handleSpotify = (e)=>{
set_request_spotify(e.target.value)
}
const handlgender = (e)=>{
set_request_gender(e.target.value)
}
const handleitunes = (e)=>{
set_request_itunes(e.target.value)
}
const handleYoutube = (e)=>{
set_request_youtube(e.target.value)
}
const handleFacebook = (e)=>{
set_request_facebook(e.target.value)
}
const handleInstagram = (e)=>{
set_request_instagram(e.target.value)
}
function requestClick(){
console.log(request_user_name);
fetch(variables.API_URL+'request',{
method:'POST',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
},
body:JSON.stringify({
request_user_name:request_user_name,
request_first_name:request_first_name,
request_last_name:request_last_name,
request_gender:request_gender,
request_phone:request_phone,
request_email:request_email,
request_spotify:request_spotify,
request_itunes:request_itunes,
request_youtube:request_youtube,
request_facebook:request_facebook,
request_instagram:request_instagram
})
})
.then(res=>res.json())
.then((result)=>{
alert(result)
window.location.reload(false);
},(error)=>{
alert('Failed');
})
}
return(
<div>
<center>
<h1>Connect with us</h1>
<hr/>
<h3>Reqest for Account !</h3>
<p></p>
<div className="container">
<br/>
<br/>
<div className="row">
<style>{" .rr{ float:left; } "} </style>
<style>{" .bb{ float:right; } "} </style>
<style>{" .txt{ height:40px;  } "} </style>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Username</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_user_name}
onChange={handleUsername}/>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> First Name</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_first_name}
onChange={handleFirstname}/>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Last Name</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_last_name}
onChange={handleLastname}/>
</div>
</div>
</div>
</div>
<div className="row">
<style>{" .rr{ float:left; } "} </style>
<style>{" .bb{ float:right; } "} </style>
<style>{" .txt{ height:40px;  } "} </style>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Gender</label>
<div className="input-group input-group-lg">
<div class="form-check ">
<input className="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked
value="1"
onChange={handlgender}/>
<label className="form-check-label ml-3" for="flexRadioDefault1">
Male
</label>
</div>
<div class="form-check">
<input className="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" 
value="1"
onChange={handlgender}/>
<label className="form-check-label" for="flexRadioDefault2">
Female
</label>
</div>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Phone Number</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_phone}
onChange={handlePhone}/>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<div className="mb-3">
<label className="form-label rr d-flex"> Email</label>
<div className="input-group input-group-lg">
<input type="email" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_email}
onChange={handleEmail}/>
</div>
</div>
</div>
</div>

</div>
<div className="row">
<style>{" .rr{ float:left; } "} </style>
<style>{" .bb{ float:right; } "} </style>
<style>{" .txt{ height:40px;  } "} </style>
</div>
<div className="row">
<style>{" .rr{ float:left; } "} </style>
<style>{" .bb{ float:right; } "} </style>
<style>{" .txt{ height:40px;  } "} </style>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Spotify</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_spotify}
onChange={handleSpotify} />
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> itunes</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_itunes}
onChange={handleitunes}/>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Youtube</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_youtube}
onChange={handleYoutube}/>
</div>
</div>
</div>
</div>
<div className="row">
<style>{" .rr{ float:left; } "} </style>
<style>{" .bb{ float:right; } "} </style>
<style>{" .txt{ height:40px;  } "} </style>
<div className="col-2">
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Facebook</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_facebook}
onChange={handleFacebook}/>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Instagram</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_instagram}
onChange={handleInstagram}/>
</div>
</div>
</div>
<div className="col-2">
</div>
</div>
<div className="raw">
<style>{" .bb{ float:right; } "} </style>
<div className="col-5">
</div>
<div className="col-1">
<button type="button" className="btn btn-success bb"
onClick={requestClick}  >Request</button>
</div>
<div className="col-5">

</div>
</div>


</div>

</center>
</div>
)
}

export default Request

Answer 1

我找到了解决方案，我错过了单选按钮值中的发送参数。然后我修改了代码，现在它是工作的。