@campus1

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

Всем привет. Есть у меня компонент в котором рендерится инфа про продукты.
Есть так же кнопки prev / next, на клик которых можно переходить между продуктами внутри компонента.
То есть если у нас есть [{id: 2, name: "Apple"}, {id: 3, name: "Banana"}]
Мы допустим на компоненте Banana - /products-setup/product-info/3
Кликаем на prev кнопку переходим на - /products-setup/product-info/2
И так далее
Вот так это реализовано
changeContent = (action) => {
    const {productTable, routeParams: {id}} = this.props;
    const indexOfCurrentElement = productTable.data.findIndex(obj => obj.id === Number(id));
    const index = action === "next" ? indexOfElement + 1 : indexOfElement - 1;
    const previousElement = productTable.data[index];
    const path = `/products-setup/product-info/${previousElement.id}`;
    browserHistory.push(path);
  }

componentDidUpdate(prevProps){
    if(this.props.location !== prevProps.location){
      getProductById(
        this.props.routeParams.id
      )
    }
  }



То есть когда мы кликаем внутри компонента на допустим prev, то происходит поиск индекс current продукта и берется предыдущий объект продукта и идет запрос на получение инфы про продукт и делается ре-рендер.

Теперь вопрос - Допустим пользователь зашёл на компонент, сделал какие-то действия (проредактировал название продукта) и нажимает на кпопку Previous. Как мне определить что пользователь имеет не сохраненные данные и выдать попап что перед тем как перейти на предыдущий продукт, надо сохранить данные??

P.S Весь код не могу выставить потому что проект confidence
  • Вопрос задан
  • 161 просмотр
Решения вопроса 3
EaGames
@EaGames
Front-end developer
Вещаете обработчик на изменения (onChange), если что-то изменилось изменяем state, с changed: false на true. Ну и соответственно в changeContent проверяем если this.state.changed то выводим попап или что там нужно, если нет то ничего не делаем пускаем его дальше.
Ответ написан
0xD34F
@0xD34F Куратор тега React
Пусть данные будут представлены двумя экземплярами - первый пользователь редактирует, второй остаётся неизменным. При необходимости определить наличие изменений, внесённых пользователем - сравниваете попарно их свойства.
Ответ написан
rockon404
@rockon404 Куратор тега React
Frontend Developer
Например так:
hasUnsavedChanges() {
  // валидация данных
}

handleClick = e => {
  const { dataset } = e.target;

  if (this.hasUnsavedChanges()) {
    return this.showWarningPopup();
  }

  return this.changeContent(dataset.action);
};
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 10:00
10000 руб./за проект
29 мар. 2024, в 09:59
750 руб./в час
29 мар. 2024, в 09:55
50000 руб./за проект