Question

基本上，即使刷新后，我也想保持组件的状态。这是我的代码

import React, { Component } from 'react';
import tips from './tips';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import PivotTable from 'react-pivottable/PivotTable';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import Plot from 'react-plotly.js';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';
import AWS from 'aws-sdk';

const PlotlyRenderers = createPlotlyRenderers(Plot);


class App extends Component {
  state = {
    pivotState: {
      data:  [["Name", "CreationDate"]],
      rows: ['Name'],
      cols: ['Humanize'],
      aggregatorName: 'Count',
      rendererName: 'Grouped Column Chart',
  plotlyOptions: {width: 500, height: 500}
  }
  };

 handleClick = () => {
                this.setState(
                  {
                    pivotState: {
                      data: tips,
                      rows: ['Payer Gender'],
                      cols: ['Party Size'],
                      aggregatorName: 'Count',
                      rendererName: 'Grouped Column Chart',
                  plotlyOptions: {width: 600, height: 500}
                  }
                  });
        }

    componentDidMount() {
          const previous state = JSON.parse( localStorage.getItem( "pivotstate" ) );  --> It didnt worked
          }

render() {
    //console.log(this.state)
  return (
    <div styles="width=50px">
      <PivotTable
               //  data={this.state.pullResults.body || []}
                onChange={s => this.setState({pivotState: s})}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...this.state.pivotState}
            />


      <button onClick={this.handleClick}>Get results</button>
    </div>

  );
  }
}

export default App;

我的提示数据文件

  ["Total Bill","Tip","Payer Gender","Payer Smoker","Day of Week","Meal","Party Size"],
    [16.99,1.01,"Female","Non-Smoker","Sunday","Dinner",2],
    [10.34,1.66,"Male","Non-Smoker","Sunday","Dinner",3],
    [21.01,3.5,"Male","Non-Smoker","Sunday","Dinner",3],
    [23.68,3.31,"Male","Non-Smoker","Sunday","Dinner",2],
    [24.59,3.61,"Female","Non-Smoker","Sunday","Dinner",4],
    [25.29,4.71,"Male","Non-Smoker","Sunday","Dinner",4] ]

上面的代码将首先向我显示DOM中的空图，然后单击按钮将呈现结果。这些结果在刷新后会消失，但即使在刷新后，我也要保留它们。只有在我按下按钮后，更新才应该发生。

我知道我需要为此使用localstorage。在localstorage中，我需要将状态传递为JSON.stringify之类的JSON.parse( localStorage.getItem( "pivotstate" ) );，我在componentDidMount中保留了此localstorage步骤，但是我不知道如何在此处传递pivotstate。

引用for the source

感谢您的帮助。谢谢

Answer 1

我认为最好使用componentDidMount，componentWillUnmount生命周期和beforeunload事件监听器，而不是每次更新都更新本地存储空间

setStateToLocalStorage = () => {
  localStorage.setItem("state", JSON.stringify(this.state));
  window.removeEventListener("beforeunload", this.setStateToLocalStorage);
}

componentDidMount() {
  window.addEventListener('beforeunload', this.setStateToLocalStorage);
  this.setState(
    JSON.parse(localStorage.getItem('state'))
  );
}

componentWillUnmount() {
  this.setStateToLocalStorage();
}

因此，您的设置和获取都将仅触发一次。

由于页面刷新不会调用componentWillUnmount。我们还添加了一个事件监听器，用于监听页面刷新。

Here是一个例子

Answer 2

您可以使用componentDidUpdate生命周期方法

componentDidMount() {
  let state = JSON.parse(localStorage.getItem('myState'));
  this.setState(state);

}

componentDidUpdate(prevProps, prevState) {

  if (isDiff(this.state, prevState)) {
    localStorage.setItem('myState', JSON.stringify(this.state));
  }

}

每次状态更改时，请将当前状态与以前的状态进行比较，如果它们不同，则将当前状态保存到localStorage

这是一个简单的哑差异函数实现：

function isDiff(a,b) {
  return JSON.stringify(a) !== JSON.stringify(b);
}

即使刷新reactjs中的浏览器后，如何保持状态？

2 个答案: