使用 sequelize 更新数据

Question

我正在开发一个 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!`
      });
    }
  });
};

当我在http://localhost:5000/users/10 上使用 Postman 和请求 PUT 时，我正确地更新了用户。我的问题是，如果我使用我的 Reactjs 代码，我将无法获得 id。

编辑 2

我在 state 和 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'

Answer 1

您没有从应用程序发送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 字段并且它是现有用户。