Question

我对React非常陌生，所以请多多包涵。

我正在将回调从App.js传递到子组件，该子组件然后将信息发送回App.js，并使用它来设置App.js中的状态。但是，当我刷新页面时，App.js中的状态会恢复为其原始状态（空）。我意识到每次刷新后都会调用构造函数，因此更新后的状态将被原始状态覆盖。为什么会发生这种情况，因为我认为构造函数只能运行一次。如何解决此问题，以便即使导航到其他页面或刷新也可以保持更新状态？

干杯！

Answer 1

HTTP是无状态的，因此每次刷新页面时，都会为每个组件调用构造函数以设置初始状态。要在页面重新加载期间保留信息，您可以使用web storage将信息存储在浏览器中。除非明确清除，否则localStorage在所有页面会话中都会保留。 sessionStorage一直持续到会话结束。

要存储项目：

localStorage.setItem('foo', 'bar');

要阅读项目：

let data = localStorage.getItem('foo');

要清除项目：

// remove item with key 'foo'
localStorage.removeItem('foo');

//remove all items
localStorage.clear();

请注意，这些项目以字符串形式存储，因此您应该将其他数据类型转换为字符串，如下所示：

//store object
localStorage.setItem('object', JSON.stringify(myObject));

//read object
let myObject = JSON.parse(localStorage.getItem('object'));

为什么每次刷新页面时app.js都会调用构造函数？

1 个答案: