如何解决Material UI图标存入localStorage后读取返回null的问题

localStorage 仅支持存储字符串格式的数据，你直接将 React 组件实例存入时，JSON.stringify 无法对组件/函数类数据进行序列化，会自动将这类值转为 null 存储，所以读取的时候拿到的就是 null。

核心思路是存储图标的唯一标识符，渲染时再映射为真实组件，具体操作步骤如下：

• 第一步：提前导入所有你用到的 Material UI 图标，建立图标名到组件的映射表

// 统一导入所有用到的图标
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import HomeIcon from '@mui/icons-material/Home';
import SettingsIcon from '@mui/icons-material/Settings';
// 其他用到的图标继续导入

// 建立映射表，key是图标名的字符串，value是对应的图标组件
const ICON_MAP = {
  ShoppingCartIcon: ShoppingCartIcon,
  HomeIcon: HomeIcon,
  SettingsIcon: SettingsIcon
  // 其他图标继续补充映射
}

• 第二步：修改存储逻辑，存入图标名的字符串而非组件实例
  你在给用户提供图标选择选项时，每个选项对应的值直接用图标名的字符串（比如用户选购物车图标，对应值就是'ShoppingCartIcon'），修改handleAddIcon逻辑：

handleAddIcon = (icon) => {
  // 这里取图标名字符串，比如icon.iconName就是'ShoppingCartIcon'
  let iconName = icon.iconName;
  let activeTab = this.state.activeTab;
  let tabs = [...this.state.tabs];
  tabs[activeTab].icon = iconName;
  this.setState({
    tabs,
    selectIcon: false,
    newCategorySelected: false
  } , () => localStorage.setItem('tabs', JSON.stringify(this.state.tabs)))
}

• 第三步：读取数据后渲染时，从映射表中取对应组件渲染

// 从localStorage读取逻辑不用改，读出来的tabs里icon字段是字符串
const tabs = JSON.parse(localStorage.getItem('tabs'))?.length ? JSON.parse(localStorage.getItem('tabs')) : [];

// 渲染标签时的逻辑示例
tabs.forEach(tab => {
  // 从映射表拿到对应的组件，可加兜底图标避免映射不存在报错
  const Icon = ICON_MAP[tab.icon] || DefaultIcon;
  // 渲染时直接使用组件
  return <div><Icon /> {tab.label}</div>
})

如果后续新增了用到的图标，记得同步更新ICON_MAP的映射关系即可。

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