React Router v4 上一个状态组件 [英] React Router v4 previous state component

问题描述

我正在寻找解决方案 - react router v4 不保持组件的先前状态.例如，这是一个简单的计数器:

import React, { Component } from "react";类计划扩展组件{构造函数(道具){超级(道具)；this.state = {计数器:0};this.holdState = this.holdState.bind(this);}保持状态(){this.props.location.state = this.state.counter;const state = this.state;this.setState({计数器:state.counter + 1});}使成为() {返回 (<div><ul><li>6/5 @ E​​vergreens</li><li>6/8 vs 踢球者</li><li>6/14 @ United</li><div><button onClick={() =>this.holdState()}>点击</button><span>{this.state.counter}</span>

);}}导出默认计划；

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

解决方案

每当你的组件挂载时，你的构造函数都会被启动，这会将状态重置回 0.当你在另一个组件上并按下返回按钮时会发生这种情况如果您当前的路线被安装.

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

另一件事是，当您希望基于 prevState 更新状态时，您可以使用功能性 setState.检查此以获取更多详细信息:何时使用函数式 setState

import React, { Component } from "react";类计划扩展组件{构造函数(道具){超级(道具)；this.state = {计数器:localStorage.getItem('counter') ||0};this.holdState = this.holdState.bind(this);}保持状态(){localStorage.setItem('counter', this.state.counter);this.setState(prevState => ({计数器:prevState.counter + 1}));}使成为() {返回 (<div><ul><li>6/5 @ E​​vergreens</li><li>6/8 vs 踢球者</li><li>6/14 @ United</li><div><button onClick={() =>this.holdState()}>点击</button><span>{this.state.counter}</span>

);}}导出默认计划；

I'm looking for a solution - react router v4 doesn't hold the previous state of component. For example, here is a simple counter:

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;

I was trying to push the state into location and history by props. But whenever I press "browser button back" from the next page, it always resets the state. Can someone tell me where I'm doing a mistake?

解决方案

Whenever your component mounts, your constructor will be initiated which will reset the state back to 0. This happens when you are on another component and press back button in which case your current Route gets mounted.

Also directly mutating the location.state value is not a right approach. What you need is to save your value in localStorage and refill it in state if it exists.

Another thing is that when you wish to update the state based on prevState, you could make use of functional setState. Check this for more details: 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 上一个状态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！