我正在做一个Reactjs项目。登录后有登录/注册表格，我可以在账户页面中显示用户的数据。
在"帐户"页面上，用户将能够更新他注册时填写的数据。
表单包含：
- 名字
- 姓氏
- 电子邮件
- 电话
- 交货地址
我想使用Reactjs表单更新数据。
我的代码
前部
class Account extends Component {
constructor() {
super();
this.state = {
first_name: "",
last_name: "",
email: "",
phone: "",
deliveryAddress: "",
errors: {}
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
const token = localStorage.usertoken;
const decoded = jwt_decode(token);
this.setState({
first_name: decoded.first_name,
last_name: decoded.last_name,
email: decoded.email,
phone: decoded.phone,
deliveryAddress: decoded.deliveryAddress
});
}
handleChange = input => e => {
this.setState({ [input]: e.target.value });
};
handleSubmit(e) {
e.preventDefault();
const { first_name, last_name, email, phone, deliveryAddress } = this.state;
const body = {
first_name,
last_name,
email,
phone,
deliveryAddress
};
const json = JSON.stringify(body);
console.log(json);
axios.put("http://localhost:5000/users/:id", json).then(res => {
console.log(res);
});
}
UserController.ts
export const updateUser = (req, res) => {
User.update(
{
first_name: req.body.first_name,
last_name: req.body.last_name,
email: req.body.email,
phone: req.body.phone,
deliveryAddress: req.body.deliveryAddress
},
{
where: {
id: req.body.id
}
}
).then(user => {
res.json(user);
});
};
我认为我的问题在于我的where属性，因为当我点击保存按钮时，我得到了：Executing (default): UPDATE users SET updatedAt='2020-02-18 14:30:03' WHERE id = NULL，什么都没有发生，也没有更新。
编辑
UserController.ts
export const updateUser = (req, res) => {
const id = req.params.id;
User.update(
{
first_name: req.body.first_name,
last_name: req.body.last_name,
email: req.body.email,
phone: req.body.phone,
deliveryAddress: req.body.deliveryAddress
},
{
where: {
id: id
}
}
).then(user => {
if (user == 1) {
res.send({
message: "User was updated successfully"
});
} else {
res.send({
message: `Cannot update User with id=${id}. Maybe User was not found or req.body is empty!`
});
}
});
};
当我使用Postman和请求PUT时http://localhost:5000/users/10我正确地更新了用户。我的问题是，如果我使用Reactjs代码，我就无法获得id。
编辑2
我在状态和componentDidMount((函数中添加了id，如下所示：
componentDidMount() {
const token = localStorage.usertoken;
const decoded = jwt_decode(token);
this.setState({
id: decoded.id,
first_name: decoded.first_name,
last_name: decoded.last_name,
email: decoded.email,
phone: decoded.phone,
deliveryAddress: decoded.deliveryAddress
});
}
handleSubmit(e) {
e.preventDefault();
const {
id,
first_name,
last_name,
email,
phone,
deliveryAddress
} = this.state;
const body = {
first_name,
last_name,
email,
phone,
deliveryAddress
};
const json = JSON.stringify(body);
console.log(json);
axios.put(`http://localhost:5000/users/${id}`, json).then(res => {
console.log(res);
});
}
我现在可以获得当前id:Executing (default): UPDATE users SET updatedAt='2020-02-19 08:48:57' WHERE id = '15'，但什么也没发生，因为first_name字段没有像Postman:Executing (default): UPDATE users SET first_name='Quentin',updatedAt='2020-02-19 08:50:57' WHERE id = '15'那样修改
您没有从应用程序发送id字段，因此无法进行
where: {
id: req.body.id
}
您可以确保也在本地保存id并发送它，以便API端点可以使用它，也可以改为执行upsert。
另一种选择是通过电子邮件而不是ID:找到用户
where: {
email: req.body.email
}
你必须确保不允许你的用户从此页面更改他们的电子邮件。或者，如果您真的需要，您甚至可以添加另一个名为oldEmail的字段。
编辑：在看到你的新编辑和更多代码后，我相信我看到了问题，你没有正确地从React发送ID。你在做：
axios.put("http://localhost:5000/users/:id", json).then(res => {
当你真的应该做以下事情：
axios.put(`http://localhost:5000/users/${this.state.id}`, json).then(res => {
假设您的状态中有id字段，并且它是一个现有用户。