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

我试图通过道具将状态推入位置和历史。 BBut每当我＆gt;按＆＃34;浏览器按钮＆＃34;从下一页开始，它总是重置状态。

当您致电setState而未改变路线时，您只是触发了对您的组件的重新渲染。如果在增加后按下后退按钮，计数器反应路由器将从历史堆栈中弹出最后一条路径，但由于您没有先前的路由，因此组件将被重新安装，因此将重置状态。

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

Answer 2

每当你的组件安装完毕，你的构造函数就会被启动，这会将状态重置为0.当你在另一个组件上并按回按钮时会发生这种情况，在这种情况下你的当前路由被挂载。

同样直接改变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;

React Router v4以前的状态组件

2 个答案: