reactjs - 如何通过 react 恢复后退按钮的状态

Question

如果我有一个简单的 react 组件，它记录按钮的点击计数，并且每次点击都会记录新的历史状态而不更改 URL。当用户单击返回时，如何将状态恢复到原来的状态？

我可以使用 native JavaScript 历史对象来执行此操作，但是当用户转换回第一个状态并从另一个组件返回到该组件的最后一个状态时，它会失败。

我怀疑使用react-router(1.0)有更好的方法吗？

import React, { Component } from 'react';

export default class Foo extends Component {
  state = {
    clickCount: 0,
  };

  componentWillMount() {
    window.onpopstate = (event) => {
      if (event.state.clickCount) {
        this.setState({ clickCount: event.state.clickCount });
      }
    };
  }

  onClick() {
    const newClickCount = this.state.clickCount + 1;
    const newState = { clickCount: newClickCount };
    this.setState(newState);
    history.pushState(newState, '');
  }

  render() {

    return (
      <div>
        <button onClick={this.onClick.bind(this)}>Click me</button>
        <div>Clicked {this.state.clickCount} times</div>
      </div>
    );
  }
}

Answer 1

localStorage 甚至 cookies 都是选项，但可能不是最好的方法。您应该将计数存储在数据库中，这样您就可以将构造函数中的初始状态设置为数据库中保存的最后一个值。

如果您只需要在客户端(而不是在数据库中)保留计数，则另一个选择是使用闭包。

// CountStore.js
var CountStore = (function() {
  var count = 0;

  var incrementCount = function() {
    count += 1;
    return count;
  };

  var getCount = function() {
    return count;
  };

  return {
    incrementCount: incrementCount,
    getCount: getCount
  }

})();

export default CountStore;

因此您的代码将更改为以下内容。

import React, { Component } from 'react';
import CountStore from './CountStore'; 

export default class Foo extends Component {
  state = {
    clickCount: CountStore.getCount()
  };

  componentWillMount() {
    window.onpopstate = (event) => {
      if (event.state.clickCount) {
        this.setState({ clickCount: event.state.clickCount });
      }
    };
  }

  onClick() {
    const newClickCount = CountStore.incrementCount();
    const newState = { clickCount: newClickCount };
    this.setState(newState);
  }

  render() {

    return (
      <div>
        <button onClick={this.onClick.bind(this)}>Click me</button>
        <div>Clicked {this.state.clickCount} times</div>
      </div>
    );
  }
}

可能有一种更简洁的方式来使用react-router，但这是一个选项。