如何将图标存储到本地存储中？
如何将图标存储到本地存储中？
提问于 2021-09-02 00:05:25
我有一个对象数组，结构如下：
{
id: 0,
icon: <ShoppingCartIcon />,
label: 'Groceries',
content: ['grocery list', 'test']
}, 图标是从材质UI导入的。当标签呈现在我的页面上时，图标会显示在标签旁边。用户可以添加新标签并选择相应的图标。我正在设置我的状态以添加新对象，以及他们选择的图标。
handleAddIcon = (icon) => {
let iconValue = icon.icon;
// console.log(JSON.stringify(iconValue))
let activeTab = this.state.activeTab;
let tabs = [...this.state.tabs];
tabs[activeTab].icon = iconValue;
this.setState({
tabs,
selectIcon: false,
newCategorySelected: false
} , () => localStorage.setItem('tabs', JSON.stringify(this.state.tabs)))
}但是当我尝试从我的本地存储中检索它时，图标值返回为null。我猜这是因为图标是导入的吧？
(JSON.parse(localStorage.getItem('tabs')).length != 0) ? tabs = JSON.parse(localStorage.getItem('tabs')) : tabs = []
console.log(tabs.map(id => id.icon)) // all values are null, and no icon can render on the page有没有办法绕过这个问题？
Stack Overflow用户
发布于 2021-09-02 00:20:26
您不能将react组件存储在本地存储中，因为这将需要“字符串化”组件的实例，而这只会给您提供[object] [object]。
你需要做的是存储一些字符串键或一些你可以存储的图标的代码表示。在检索时，您可以呈现相关图标。
您需要更改对象以存储图标名称/ id /正在选择的图标的某些表示。
{
id: 0,
iconId: 'ShoppingCartIcon1',
label: 'Groceries',
content: ['grocery list', 'test']
}考虑到你使用的是@material-ui/icons，你可以使用图标的名字作为它们的键。您需要对其进行更改，以便在用户选择图标时存储图标名称。
handleAddIcon = (icon) => {
let iconName = icon.name; // get the icon name / id here
// console.log(JSON.stringify(iconValue))
let activeTab = this.state.activeTab;
let tabs = [...this.state.tabs];
tabs[activeTab].iconName = iconName; // change this to rely on the icon name
// ...rest
}渲染图标时，可以根据选定的名称渲染图标，而不是直接依赖于处于状态的图标。
// on option is just to check for each icon
tabs.map((tab) => (
<Tab>
{tab.iconName === "ShoppingCart" && <ShoppingCartIcon />}
{tab.iconName === "Alarm" && <AlarmIcon />}
// ...so on
</Tab>
);如果有太多图标选项，您可以在图标名称和组件之间创建一个映射，如下所示：
// on option is just to check for each icon
const nameToIconMap = {
ShoppingCart: <ShoppingCartIcon />,
Alarm: <AlarmIcon />,
// soo on
}
tabs.map((tab) => (
<Tab>
// reference the name inside the render like so
{nameToIconMap[tab.iconName]}
</Tab>
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69021733
复制相关文章
相似问题
腾讯云开发者
