Как получить доступ к значению состояния на странице обновления в реакции?

Question

Я использую трекер времени в своем проекте.Когда я запускаю свой трекер, я сохраняю значение этого трекера в состояние, а при приостановке этого трекера меняю это значение в состояние.Но когда я обновляю страницу, я не получаю последнее обновленное значение состояния.Итак, как я могу получить значение состояния при обновлении страницы?

const React = require("react");
const ms = require("pretty-ms");

class TaskTimer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: 0,
      isOn: false,
      start: 0
    };
    this.startTimer = this.startTimer.bind(this);
    this.stopTimer = this.stopTimer.bind(this);
    this.resetTimer = this.resetTimer.bind(this);
  }

  startTimer() {
    this.setState({
      isOn: true,
      time: this.state.time,
      start: Date.now() - this.state.time
    });
    this.timer = setInterval(
      () =>
        this.setState({
          time: Date.now() - this.state.start
        }),
      1
    );
  }
  stopTimer() {
    this.setState({ isOn: false });
    clearInterval(this.timer);
  }
  resetTimer() {
    this.setState({ time: 0, isOn: false });
  }
  render() {
    let start =
      this.state.time == 0 ? (
        <button onClick={this.startTimer}>start</button>
      ) : null;
    let stop =
      this.state.time == 0 || !this.state.isOn ? null : (
        <button onClick={this.stopTimer}>stop</button>
      );
    let resume =
      this.state.time == 0 || this.state.isOn ? null : (
        <button onClick={this.startTimer}>resume</button>
      );
    let reset =
      this.state.time == 0 || this.state.isOn ? null : (
        <button onClick={this.resetTimer}>reset</button>
      );
    return (
      <div>
        <h3>timer: {ms(this.state.time)}</h3>
        {start}
        {resume}
        {stop}
        {reset}
      </div>
    );
  }
}
module.exports = TaskTimer;

Кто-нибудь, пожалуйста, подскажите мне, как получить значение состояния при обновлении страницы?

Answer 1

Если вы хотите, чтобы ваше состояние сохранялось после обновления, вам нужно будет сохранить состояние в localStorage в componentWillUnmount, а затем сбросить состояние до того, которое было в componentDidMount. Это

componentDidMount() {
  const stateObject = JSON.parse(localStorage.getItem("state"));
  this.setState(stateObject); 
}

componentWillUnmount() {
  localStorage.setItem("state", JSON.stringify(this.state));
}

Однако это может привести к неожиданным результатам, если componentWillUnmount не может быть вызван во время обновления. Поэтому более надежным (но менее производительным) методом будет обновление состояния до localStorage каждый раз, когда вы обновляете свое состояние. Это можно сделать, введя код в componentDidUpdate.

componentDidUpdate(prevProps, prevState) {
  if(prevState != this.state) {
    localStorage.setItem("state", this.state);
  }
}

UPDATE:

После некоторого исследования я обнаружил событие beforeunload, которое могло бы работать довольно эффективно.

  onUnload = (event) => {
    localStorage.setItem("state", JSON.stringify(this.state)
  }

  componentDidMount() {
    window.addEventListener("beforeunload", this.onUnload)
  }

  componentWillUnmount() {
    window.removeEventListener("beforeunload", this.onUnload)
  }

Однако имейте в виду, что onbeforeunload неправильно реализован в некоторых браузерах (например, Safari в iOS). Таким образом, вы можете столкнуться с некоторыми проблемами в этом отношении. Это список совместимости для события https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility.