调用Object.fromEntries转换entry数组为对象报类型错误，原因是什么？

直接报错原因 #

你当前代码的执行顺序存在逻辑错误：
const saved = JSON.parse(Object.fromEntries(localStorage.getItem(key)))
这段代码会先将localStorage.getItem(key)返回的JSON字符串直接传入Object.fromEntries()，而Object.fromEntries()要求入参是每一项为[key, value]结构的可迭代对象（比如二维数组）。字符串虽然可迭代，但迭代产出的是单个字符，完全不符合方法要求的入参格式，因此直接抛出类型错误。

立即修复代码 #

调整JSON.parse和Object.fromEntries的执行顺序即可：

const saved = Object.fromEntries(JSON.parse(localStorage.getItem(key)))

React组件持久化的潜在问题 #

你当前直接序列化React元素存到localStorage的方案存在固有缺陷，即使修复了上述报错，也无法正常还原可用的React组件：

• React元素的$$typeof属性是Symbol类型，JSON序列化时会直接被转为null，反序列化后的对象缺少合法的React元素标识，直接渲染会触发React内部报错
• 若组件包含函数、DOM节点、Symbol、Map/Set等非JSON可序列化类型，序列化过程中会直接丢失这些属性，或被转为错误结构，反序列化后无法正常工作
• 正确的实现思路是仅持久化组件的状态数据、组件类型标识、渲染配置，读取到存储内容后，用这些数据手动生成对应的React元素，不要直接序列化完整的React元素对象

后续排查方向 #

如果调整顺序后仍有报错，按以下步骤排查：

• 打印localStorage.getItem(key)的返回值，确认存储时没有写入空值、格式错误的JSON字符串
• 打印JSON.parse(localStorage.getItem(key))的结果，确认确实是二维数组结构，每一项都是长度为2的键值对数组，不存在异常项
• 确认存储时调用JSON.stringify的入参没有循环引用，否则序列化阶段就会生成无效内容

内容的提问来源于stack exchange，提问作者Efe FRK