如何通过反应恢复后退按钮的状态

Question

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

我可以使用本机 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 甚至 cookie 都是选项，但可能不是最好的方法。您应该将计数存储在数据库中，这样您可以将构造函数中的初始状态设置为数据库中保存的最后一个值。

如果您只需要在客户端（而不是在数据库中）持久化计数，另一种选择是使用闭包。

// 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，但这是一个选项。

Answer 2

一个例子：

import React, {Component} from "react";
import {NavLink} from "react-router-dom";

interface Props {
}

interface State {
    count: number
}

export default class About extends Component<Props, State> {

    UNSAFE_componentWillMount(): void {
        this.setState(Object.getPrototypeOf(this).constructor.STATE || {});
    }

    componentWillUnmount(): void {
        Object.getPrototypeOf(this).constructor.STATE = this.state;
    }

    constructor(props: Props) {
        super(props);
        this.state = {count: 0}
    }

    render() {
        const {count} = this.state;
        return <div style={{width: "100%", height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-evenly", fontSize: "2em"}}>
            <span>Count: {count}</span>
            <button onClick={() => this.setState({count: count + 1})}>PLUS ONE</button>
            <NavLink to="/">Redirect to HOME</NavLink>
        </div>
    }
}