0

I'm working on a Reactjs project. There is login/register forms after login I am able to display the user's data in an Account page.

On the Account page the user will be able to update the data he filled in when he signed up.

The form contains :

  • First name
  • Last name
  • Email
  • Phone
  • Delivery address

I want to update the data using the Reactjs form.

My code

Front

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);
  });
};

I think my issue is in my where attribute because when I click on the Save Button I got : Executing (default): UPDATE users SET updatedAt='2020-02-18 14:30:03' WHERE id = NULL and nothing happens, nothing is updated.

EDIT

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!`
      });
    }
  });
};

When I use Postman and the request PUT on http://localhost:5000/users/10 I correctly update the user. My issue is that I can't get the id if I use my Reactjs code.

EDIT 2

I added the id in the state and in the componentDidMount() function as follows :

  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);
    });
  }

I'm now able to get the current id : Executing (default): UPDATE users SET updatedAt='2020-02-19 08:48:57' WHERE id = '15' but nothing happens because the first_name field is not modified like I do with Postman : Executing (default): UPDATE users SET first_name='Quentin',updatedAt='2020-02-19 08:50:57' WHERE id = '15'

2
  • Why are you checking that user is equal to 1 on success? That doesn't seem right. Commented Feb 18, 2020 at 16:53
  • This returns success if I change any field and returns the error if the id doesn't exist, it works fine. Commented Feb 19, 2020 at 9:17

1 Answer 1

1

You're not sending an id field from the app, so you cannot do

where: {
  id: req.body.id
}

You can either make sure you save the id locally too and send it so your API endpoint can use it or you can do an upsert instead.

Another option is to find the user by email instead of ID:

where: {
  email: req.body.email
}

You would have to make sure to not allow your user to change their email from this page. Or, you can even add another field called oldEmail if you really need that.

EDIT: After seeing your new edit and more code, I believe I see the issue, you're not sending the ID correctly from React. You're doing:

axios.put("http://localhost:5000/users/:id", json).then(res => {

When you should really be doing the following:

axios.put(`http://localhost:5000/users/${this.state.id}`, json).then(res => {

Assuming you have the id field in your state and that it's an existing user.

Sign up to request clarification or add additional context in comments.

16 Comments

I tried to use a findOne with email and nothing happens. Please have a look at my edit
@seiju Then it's clear that you're gonna need to share some more server code. It looks like your endpoint is not receiving the data correctly. Could it be that you didn't setup bodyParser?
I'm using bodyParser, I added Server.ts code in my edit
All of my other requests work, I think the problem is from my updateUser function
Please, share the code of the endpoint that's calling updateUser.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.