react实现浏览器自动刷新_javascript-在React.js中刷新页面后如何保持状态？

javascript-在React.js中刷新页面后如何保持状态？

可以说，我有一些代码可以为上一页中选择的选择框设置状态：

this.setState({selectedOption: 5});

在刷新页面后，有什么方法可以将setState填充为5？

是否可以使用回调将其保存在localStorage中，然后执行一个大型setState，或者是否有执行这种操作的标准方法？

6个解决方案

37 votes

所以我的解决方案是在设置状态时也设置localStorage，然后在getInitialState回调中再次从localStorage中获取值，如下所示：

getInitialState: function() {

var selectedOption = localStorage.getItem( 'SelectedOption' ) || 1;

return {

selectedOption: selectedOption

};

},

setSelectedOption: function( option ) {

localStorage.setItem( 'SelectedOption', option );

this.setState( { selectedOption: option } );

}

我不确定是否可以将其视为反模式，但除非有更好的解决方案，否则它仍然有效。

DiverseAndRemote.com answered 2020-07-04T13:22:24Z

11 votes

您可以按照Omar建议使用本地存储“持久化”状态，但是一旦设置了状态就应该完成。 为此，您需要将回调传递给setState函数，并且需要对放入本地存储中的对象进行序列化和反序列化。

constructor(props) {

super(props);

this.state = {

allProjects: JSON.parse(localStorage.getItem('allProjects')) || []

}

}

addProject = (newProject) => {

...

this.setState({

allProjects: this.state.allProjects.concat(newProject)

},() => {

localStorage.setItem('allProjects', JSON.stringify(this.state.allProjects))

});

}

juliangonzalez answered 2020-07-04T13:22:45Z

7 votes

我们有一个应用程序，允许用户在页面中设置“参数”。 我们要做的是使用React Router(与History结合使用)和一个将JavaScript对象URI编码为可以用作查询字符串的格式的库，在URL上设置这些参数。

当用户选择一个选项时，我们可以使用以下方法将其值推送到当前路线上：

history.push({pathname: 'path/', search: '?' + Qs.stringify(params)});

props可以是当前路径。 在您的情况下location.search看起来像：

{

selectedOption: 5

}

然后在React树的顶层，React Router将使用location.search的属性更新该组件的props，这是我们之前设置的编码值，因此componentWillReceiveProps中将包含以下内容：

params = Qs.parse(nextProps.location.search.substring(1));

this.setState({selectedOption: params.selectedOption});

然后，该组件及其子组件将使用更新的设置重新渲染。 由于信息位于URL上，因此可以将其添加为书签(或通过电子邮件发送-这是我们的用例)，并且刷新后将使应用程序保持相同状态。对于我们的应用程序来说，这一直很好。

React Router：[https://github.com/reactjs/react-router]

历史记录：[https://github.com/ReactTraining/history]

查询字符串库：[https://github.com/ljharb/qs]

Matt Holland answered 2020-07-04T13:23:36Z

5 votes

我认为状态仅用于查看，而应该保留超出查看状态的信息和数据最好存储为props。 当您希望能够链接到页面或将URL共享到应用程序的深处但又使地址栏混乱时，URL参数非常有用。

看看Redux-Persist(如果您正在使用redux)[https://github.com/rt2zz/redux-persist]

mattwarren answered 2020-07-04T13:24:02Z

0 votes

从localStorage加载状态(如果存在)：

constructor(props) {

super(props);

this.state = JSON.parse(localStorage.getItem('state'))

? JSON.parse(localStorage.getItem('state'))

: initialState

覆盖this.setState以在每次更新后自动保存状态：

const orginial = this.setState;

this.setState = function() {

let arguments0 = arguments[0];

let arguments1 = () => (arguments[1], localStorage.setItem('state', JSON.stringify(this.state)));

orginial.bind(this)(arguments0, arguments1);

};

sMojtaba Mar answered 2020-07-04T13:24:26Z

0 votes

尝试将值存储在本地存储中，并在页面加载时从本地存储获取值。 如果您还有其他值，则应使用redux进行数据存储。

Raj Gohel answered 2020-07-04T13:24:46Z