Как повторно визуализировать компонент после запроса к базе данных - PullRequest
Новая
       3

Как повторно визуализировать компонент после запроса к базе данных

0 голосов
/ 24 февраля 2020

Я работаю над проектом Reactjs с формами входа / регистрации.

После входа в систему пользователь может обновить свои данные, такие как имя, фамилия, адрес электронной почты, адрес или телефон.

Функция обновления данных работает, но мне нужно выйти / войти, чтобы просмотреть изменения в моем компоненте. Если я перефразирую sh, то после обновления страницы остаются прежними.

Мой код

Фронт 

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({
      id: decoded.id,
      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
    };
    console.log(body);

    axios.put(API_URL + `/users/${this.state.id}`, body).then(res => {
      this.setState({ body });
      console.log(res);
    });
    toast.info("Vos informations ont bien été modifiées", {
      position: "bottom-center",
      autoClose: 5000,
      hideProgressBar: true,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true
    });
  }

Назад 

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.params.id
      }
    }
  ).then(user => {
    if (user == 1) {
      res.send({
        message: "User was updated successfully"
      });
    } else {
      res.send({
        message: `Cannot update User with id=${req.params.id}. Maybe User was not found or req.body is empty!`
      });
    }
  });
};

Я думаю, что моя проблема связана с токеном, который я должен обновить sh. Потому что когда я выхожу / захожу, токен меняется.

1 Ответ

0 голосов
/ 24 февраля 2020

Ошибка с setState

axios.put(API_URL + `/users/${this.state.id}`, body).then(res => {
  this.setState({ body });
  console.log(res);
});

Это установит состояние на 

{
  body: {
    first_name,
    last_name,
    email,
    phone,
    deliveryAddress
  }
}

. Вы должны использовать this.setState(body) или this.setState({ ...body }), чтобы получить это следующее состояние : 

{
  first_name,
  last_name,
  email,
  phone,
  deliveryAddress
}

Кстати, ваш toast должен быть в .then() после axios.put()

...