我真的很陌生，我創建了一個注冊表單，但是當發布資料值混合時，我創建了 onchange 和 onsubmit 來跟蹤更改并提交到后端服務器，但是我收到了 badrequest，因為值混合在有效負載中
const Signup = ({ signup, isAuthenticated }) => {
const [accountCreated, setAccountCreated] = useState(false);
const [formData, setFormData] = useState({
username: "",
password: "",
email: "",
first_name: "",
last_name: "",
profile_type: "",
});
const { username, password, email, first_name, last_name, profile_type } = formData;
const onChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = (e) => {
e.preventDefault();
signup(username, password, email, first_name, last_name, profile_type);
setAccountCreated(true);
};
if (isAuthenticated) {
return <Redirect to="/" />;
}
if (accountCreated) {
return <Redirect to="/login" />;
}
return (
<div className="container mt-5">
<h1>Sign Up</h1>
<p>Create your Account</p>
<form onSubmit={(e) => onSubmit(e)}>
<div className="form-group">
<input
className="form-control"
type="text"
placeholder="Username"
name="username"
value={username}
onChange={(e) => onChange(e)}
required
/>
</div>
<div className="form-group">
<input
className="form-control"
type="password"
placeholder="Password"
name="password"
value={password}
onChange={(e) => onChange(e)}
minLength="6"
required
/>
</div>
<div className="form-group">
<input
className="form-control"
type="email"
placeholder="Email*"
name="email"
value={email}
onChange={(e) => onChange(e)}
required
/>
</div>
<div className="form-group">
<input
className="form-control"
type="text"
placeholder="First Name*"
name="first_name"
value={first_name}
onChange={(e) => onChange(e)}
required
/>
</div>
<div className="form-group">
<input
className="form-control"
type="text"
placeholder="Last Name*"
name="last_name"
value={last_name}
onChange={(e) => onChange(e)}
required
/>
</div>
<div className="form-group">
<select
className="form-control"
name="profile_type"
onChange={(e) => onChange(e)}
required
>
<option value="">--------</option>
<option value="STD">
Student
</option>
<option value="PRF">
Professor
</option>
</select>
</div>
<button className="btn btn-primary" type="submit">
Register
</button>
</form>
<p className="mt-3">
Already have an account? <Link to="/login">Sign In</Link>
</p>
</div>
);
};
const mapStateToProps = (state) => ({
isAuthenticated: state.auth.isAuthenticated,
});
export default connect(mapStateToProps, { signup })(Signup);
當我提交這是我在有效負載中得到的所有值混合但電子郵件和個人資料型別正確我該如何解決這個問題？
{username: "lastname", password: "firstname", email: "[email protected]", first_name: "username1",…}
email: "[email protected]"
first_name: "username1"
last_name: "Password"
password: "firstname"
profile_type: "STD"
username: "lastname"
變成這樣
{username: "username1", password: "Password", email: "[email protected]", first_name: "firstname",…}
email: "[email protected]"
first_name: "firstname"
last_name: "lasttname"
password: "Password"
profile_type: "STD"
username: "username1"
uj5u.com熱心網友回復：
嘗試檢查注冊方法中的引數順序.. 或在每個輸入(e) => setFormData({...formData, property name: e.target.value})的onChange方法中嘗試此代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/475632.html