React Router v4 предыдущий компонент состояния

Question

Я ищу решение - реагирует маршрутизатор v4 не поддерживает предыдущее состояние компонента. Например, вот простой счетчик:

import React, { Component } from "react";

class Schedule extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
    this.holdState = this.holdState.bind(this);
  }

  holdState() {
    this.props.location.state = this.state.counter;
    const state = this.state;
    this.setState({
      counter: state.counter + 1
    });
  }

  render() {
    return (
      <div>
        <ul>
          <li>6/5 @ Evergreens</li>
          <li>6/8 vs Kickers</li>
          <li>6/14 @ United</li>
        </ul>
        <div>
          <button onClick={() => this.holdState()}>Click</button>
          <span>{this.state.counter}</span>
        </div>
      </div>
    );
  }
}

export default Schedule;

Я пытался подтолкнуть государство в место и историю с помощью реквизита. Но всякий раз, когда я нажимаю «кнопку браузера назад» со следующей страницы, он всегда сбрасывает состояние. Может кто-нибудь сказать мне, где я делаю ошибку?

Answer 1

Всякий раз, когда ваш компонент монтируется, ваш конструктор будет инициирован, что сбросит состояние обратно до 0. Это происходит, когда вы находитесь на другом компоненте и нажимаете кнопку возврата, и в этом случае ваш текущий маршрут монтируется.

Кроме того, изменение значения location.state напрямую не является правильным подходом. Вам нужно сохранить значение в localStorage и пополнить его в состоянии, если оно существует.

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

import React, { Component } from "react";

class Schedule extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: localStorage.getItem('counter') || 0
    };
    this.holdState = this.holdState.bind(this);
  }

  holdState() {
    localStorage.setItem('counter', this.state.counter);
    this.setState(prevState => ({
      counter: prevState.counter + 1
    }));
  }

  render() {
    return (
      <div>
        <ul>
          <li>6/5 @ Evergreens</li>
          <li>6/8 vs Kickers</li>
          <li>6/14 @ United</li>
        </ul>
        <div>
          <button onClick={() => this.holdState()}>Click</button>
          <span>{this.state.counter}</span>
        </div>
      </div>
    );
  }
}

export default Schedule;

Answer 2

Я пытался подтолкнуть государство в место и историю с помощью реквизита. B Но всякий раз, когда я> нажимаю «кнопку браузера назад» со следующей страницы, он всегда сбрасывает состояние.

когда вы звоните setState, вы не меняете маршрут, вы просто запускаете повторную визуализацию вашего компонента. Если вы нажмете кнопку «Назад» после увеличения, маршрутизатор счетчика реагирования будет извлекать последний маршрут из стека истории, но, поскольку у вас нет предыдущего маршрута, компонент будет перемонтирован, следовательно, в состояние сброса.

Чтобы реализовать то, что, как я полагаю, вы хотите достичь, вам нужно явно изменять маршрут для каждого заданного состояния (например, добавляя параметр в строку запроса с текущим значением счетчика, например ?counter=1, ?counter=2 ..), таким образом вы будете уверены, что новый маршрут будет помещаться поверх стека каждый setState, а кнопка возврата будет работать, как вы ожидаете.