React Router v4 以前的状态组件答案

【问题标题】：React Router v4 previous state componentReact Router v4 以前的状态组件
【发布时间】：2018-05-02 08:50:30
【问题描述】：

我正在寻找解决方案 - react router 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;

我试图通过道具将状态推入位置和历史。但是每当我从下一页按“浏览器按钮返回”时，它总是会重置状态。谁能告诉我哪里做错了？

【问题讨论】：

不确定您要达到的目标。是否要根据 url 存储计数值？所以例如在查询参数中？

标签： javascript reactjs react-router

【解决方案1】：

每当您的组件挂载时，您的构造函数将被启动，这会将状态重置为 0。当您在另一个组件上并按下返回按钮时会发生这种情况，在这种情况下您当前的 Route 会被挂载。

同样直接改变 location.state 值也不是正确的方法。您需要将您的值保存在 localStorage 中，并在状态中重新填充它（如果存在）。

另一件事是，当您希望根据 prevState 更新状态时，您可以使用函数式 setState。检查此以获取更多详细信息： When to use functional 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;

【讨论】：

【解决方案2】：

我试图通过道具将状态推入位置和历史。 B但是每当我从下一页>按“浏览器按钮返回”时，它总是会重置状态。

当您调用setState 时，您并没有改变路线，您只是触发了组件的重新渲染。如果您在递增后按下后退按钮，则计数器反应路由器将简单地从历史堆栈中弹出最后一条路由，但由于您没有先前的路由，组件将被重新挂载，因此重置状态。

要实现我想你想要实现的，你需要明确地更改每个 setstate 的路由（例如，在查询字符串中添加一个带有计数器当前值的参数，如?counter=1、?counter=2..），这样您就可以确保每次 setState 都会在堆栈顶部推送一条新路由，然后后退按钮将按您的预期工作。

【讨论】：