页面刷新后LocalStorage存储的组件引用为undefined的问题

这个问题的核心原因很明确：React组件（类或函数）是无法被JSON序列化的。

首次渲染时，你的widgets数组里的component字段是真实的React组件引用，但当你用JSON.stringify把整个widgets数组存入localStorage时，组件引用会被转换成空对象{}或者直接丢失。等页面刷新后，你从localStorage解析出来的component自然就变成undefined了——这就是你看到的问题。

下面是最可靠的解决方案，用组件注册表来绕开JSON序列化的限制：

步骤1：创建组件注册表 #

先定义一个全局的组件注册表，把你所有需要作为Widget渲染的组件和一个唯一的字符串key绑定起来：

// 示例：根据你的实际组件修改这个注册表
const ComponentRegistry = {
  UserProfile: UserProfileComponent,
  TodoList: TodoListComponent,
  WeatherCard: WeatherCardComponent
};

步骤2：修改WidgetList的存储与读取逻辑 #

存储到localStorage时，不要直接存组件引用，而是存注册表对应的key；读取时再把key转换回真实的组件引用：

class WidgetList extends React.Component {
  constructor(props) {
    super(props);
    // 从localStorage读取时，将存储的componentKey转换为真实组件
    const storedWidgets = JSON.parse(localStorage.getItem('widgets')) || [];
    this.state = {
      widgets: storedWidgets.map(widget => ({
        ...widget,
        data: {
          ...widget.data,
          component: ComponentRegistry[widget.data.componentKey]
        }
      }))
    };
  }

  onChange(updatedWidgets) {
    // 准备存储的widgets：用componentKey代替无法序列化的component引用
    const widgetsToStore = updatedWidgets.map(widget => ({
      ...widget,
      data: {
        ...widget.data,
        componentKey: Object.keys(ComponentRegistry).find(key => ComponentRegistry[key] === widget.data.component),
        component: undefined // 移除无法被JSON序列化的组件引用
      }
    }));
    localStorage.setItem('widgets', JSON.stringify(widgetsToStore));
    this.setState({ widgets: updatedWidgets });
  }

  render() {
    // 修正原代码的错误：必须访问this.state.widgets
    return (
      <div>
        {this.state.widgets.map(widget => (
          <div key={widget.id}>
            <Widget data={widget.data} />
          </div>
        ))}
      </div>
    );
  }
}

步骤3：Widget组件保持不变 #

现在props.data.component已经是从注册表中取出的真实组件引用了，所以Widget组件不需要任何修改：

const Widget = (props) => {
  const { component: Component, properties } = props.data;
  console.log(Component, properties);
  return <Component {...properties} />;
};

方案优势 #

• 彻底避开了JSON无法序列化函数/类的限制
• 组件管理更集中，后续新增组件只需要在注册表中添加即可
• 不会因为组件文件路径变化导致问题（如果用路径作为标识就可能出现此类问题）

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