发送更新请求以更新服务器端未定义的配置文件

Question

我正在发送一个 axios put 请求来更新配置文件详细信息。我还有一个不可编辑的电子邮件字段，在这种情况下，我如何发送电子邮件ID以及Axios.put(..请求。

在服务器端设置断点时，我可以看到edited field值在req.body

我已经抓住了下面的电子邮件，但不确定如何与更新配置文件一起发送：

const userEmail = document.getElementsByName('email').value;

server.js

app.put('/service/profile', async (req, res, next) => {
try {
const userEmail = req.body.userEmail;
var selector = { 
where: { email: userEmail }
};
const updatePlayer = await UserModel.update(req.body, selector);
console.log("Server side update method log:" + updatePlayer);
res.status(200).json({ success: true });
} catch (err) {
//res.status(500).json({ message: e.message })
return next(err);
}
});

Profile.js

const [playerProfile, setPlayerProfile] = useState([]);
const [updateProfile, setUpdateProfile] = useState({ _id: '', photo: '', name: '', email: '', phonenumber: '', position: '', password: '' })
const handleChange = (e, id) => {
e.persist();
let itemIndex;
const targetPlayer = playerProfile.find((player, index) => {
console.log({ player, id, index });
itemIndex = index; 
return player.id === id;
});
console.log({ targetPlayer, id, e });
const editedTarget = {
...targetPlayer,
[e.target.name]: e.target.value
};
const tempPlayers = Array.from(playerProfile);
tempPlayers[itemIndex] = editedTarget;
setPlayerProfile(tempPlayers);
setUpdateProfile({ ...updateProfile, [e.target.name]: e.target.value });
};
const onSubmit = () => {
setDisabled(disabled);
const fetchData = async () => {
try {
const userEmail = document.getElementsByName('email').value;
const res = await Axios.put('http://localhost:8000/service/profile', updateProfile, userEmail);
console.log("Front End update message:" + res.data.success);
if (res.data.success) {
setIsSent(true);
history.push('/')
}
else {
console.log(res.data.message);
setHelperText(res.data.message);
}
} catch (e) {
setHelperText(e.response.data.message);
}
}
fetchData();
}

return (
<div className="register_wrapper">
<div className="register_player_column_layout_one">
<div className="register_player_Twocolumn_layout_two">
<form onSubmit={handleSubmit(onSubmit)} className="myForm">
{
playerProfile.map(({ id, photo, name, email, phonenumber, position, privilege, password }) => (
<div key={id}>
<div className="fillContentDiv formElement">
<label>
<input className="inputRequest formContentElement" name="name" type="text" value={name} 
onChange={e => handleChange(e, id)}
maxLength={30}
ref={register({
required: "Full name is required", 
pattern: {
value: /^[a-zA-Zs]{3,30}$/,
message: "Full name should have minimum of 3 letters"
}
})}
/>
<span className="registerErrorTextFormat">{errors.name && errors.name.message}</span>
</label>
<label>
<input className="inputRequest formContentElement" name="email" type="text" value={email} 
onChange={e => handleChange(e, id)}
disabled={disabled}
/>
</label>
<label>
<input className="inputRequest formContentElement" name="phonenumber" type="text" value={phonenumber} 
onChange={e => handleChange(e, id)}
maxLength={11}
ref={register({
required: "Phone number is required",
pattern: {
value: /^[0-9b]+$/,
message: "Invalid phone number"
}
})}
/>
<span className="registerErrorTextFormat">{errors.phonenumber && errors.phonenumber.message}</span>
</label>
<label>
<input className="inputRequest formContentElement" name="position" type="text" value={position} onChange={e => handleChange(e, id)}/>
</label>
<label>
<div className="select" >
<select name="privilege" id="select" value={privilege} onChange={e => handleChange(e, id)}>
<option value="player">PLAYER</option>
{/*<option value="admin">ADMIN</option>*/}
</select>
</div>
</label>
<label>
<input className="inputRequest formContentElement" name="password" type="password" value={password} 
onChange={e => handleChange(e, id)}
minLength={4}
maxLength={30}
ref={register({
required: "Password is required",
pattern: {
value: /^(?=.*?d)(?=.*?[a-zA-Z])[a-zA-Zd]+$/,
message: "Password begin with a letter and includes number !"
}
})}
/>
<span className="registerErrorTextFormat">{errors.password && errors.password.message}</span>
</label>
</div>
<label>
<span className="profileValidationText">{helperText}</span>
</label>
<div className="submitButtonDiv formElement">
<button type="submit" className="submitButton">Save</button>
</div>
</div>
))
}
</form>
</div>
</div>
</div>
);

Answer 1

从express()获得app后 写

app.use(express.urlencoded({extended:false}))