时间戳

首页 > 解决方案 > 为什么每次刷新页面时 app.js 都会调用构造函数？

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

问题描述

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

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

干杯!

标签： javascriptreactjs

解决方案

HTTP 是无状态的，因此每次刷新页面时，都会为每个组件调用构造函数来设置初始状态。要在页面重新加载时保留信息，您可以使用将信息存储在浏览器中的网络存储。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'));

推荐阅读