如何在React.js中刷新页面后维护状态？

Question

假设我有代码为上一页选择的选择框设置状态:

this.setState({selectedOption: 5});

this.state.selectedOption页面刷新后有没有办法填充5？

是否有回调我可以用它来保存在localStorage中,然后做一个大的setState或者有一个标准的方法做这样的事情？

Answer 1

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

getInitialState: function() {
    var selectedOption = localStorage.getItem( 'SelectedOption' ) || 1;

    return {
        selectedOption: selectedOption
    };
},

setSelectedOption: function( option ) {
    localStorage.setItem( 'SelectedOption', option );
    this.setState( { selectedOption: option } );
}

我不确定这是否可以被视为反模式,但它有效,除非有更好的解决方案.

Answer 2

使用 Hooks 和 sessionStorage：

const [count, setCount] = useState(1);

  useEffect(() => {
    setCount(JSON.parse(window.sessionStorage.getItem("count")));
  }, []);

  useEffect(() => {
    window.sessionStorage.setItem("count", count);
  }, [count]);

  return (
    <div className="App">
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );

如果您仍然喜欢的话，请将 sessionStorage 替换为 localStorage。

Answer 3

你可以使用本地存储作为Omar Suggest"持久化"状态,但是应该在设置状态后完成.为此,您需要将回调传递给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))
  });
}

Answer 4

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

当用户选择一个选项时，我们可以通过以下方法将该值推入当前路线：

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

pathname可以是当前路径。您的情况params如下所示：

{
  selectedOption: 5
}

然后在React树的顶层，React Router将props使用prop来更新该组件的location.search属性，该属性是我们之前设置的编码值，因此会有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

Answer 5

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

看看Redux-Persist（如果您使用的是Redux）https://github.com/rt2zz/redux-persist