React Router v4 上一个状态组件

IT技术 javascript reactjs react-router
2021-05-23 06:19:41

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

我试图通过props将状态推入位置和历史。但是每当我从下一页按下“浏览器按钮返回”时,它总是会重置状态。有人能告诉我我在哪里做错了吗?

2个回答

每当您的组件安装时,您的构造函数将被启动,它将状态重置回 0。当您在另一个组件上并按下后退按钮时会发生这种情况,在这种情况下,您当前的 Route 将被安装。

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

另一件事是,当您希望基于 prevState 更新状态时,您可以使用功能性 setState。查看更多详细信息: 何时使用功能性 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;

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

当你打电话时,你并setState没有改变路线,你只是触发了你的组件的重新渲染。如果您在递增后按下后退按钮,计数器react-router将 symply 从历史堆栈中弹出最后一条路线,但由于您没有以前的路线,组件将重新安装,因此处于重置状态。

要实现我认为您想要实现的目标,您需要明确地更改每个 setstate 的路由(例如,在查询字符串中添加一个具有计数器当前值的参数,例如?counter=1, ?counter=2..),这样您就可以确保新路由将在每个 setState 的堆栈顶部推送,然后后退按钮将按预期工作。