无法在键值存储中设置未定义的属性
Posted
技术标签:
【中文标题】无法在键值存储中设置未定义的属性【英文标题】：Cannot set properties of undefined in key-value store 【发布时间】：2022-01-01 10:24:39 【问题描述】：我有这个代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./framework.js"></script>
</head>
<body>
<p f-text="name"></p>
<script>
Framework.store('name', 'Joe');
</script>
</body>
</html>
document.querySelectorAll('*').forEach((element) =>
if (element.hasAttribute('f-text'))
const textValue = element.getAttribute('f-text');
element.innerHTML = window.fStore[textValue];
);
window.Framework =
store: (key, value = '') =>
if (value === '')
return window.fStore[key];
window.fStore[key] = value;
但是得到这个错误：
TypeError: Cannot set properties of undefined (setting 'name')
at Object.store (/framework.js:15:24)
at /:12:15
我希望页面通过从f-text 获取密钥，在window.fStore 中找到密钥的值，然后将element.innerHTML 设置为值来呈现“Joe”。 Framework.store() 接受一个键和一个值，如果没有值，则从 window.fStore 中的键返回值，如果有则将 window.fStore[key] 设置为值。
【问题讨论】：
【参考方案1】：你需要先检查window.fStore是否存在。
window.Framework =
store: (key, value = '') =>
if(!window.fStore) window.fStore =
if (value === '')
return window.fStore[key];
window.fStore[key] = value;
Framework.store('name', 'Joe');
document.querySelectorAll('*').forEach((element) =>
if (element.hasAttribute('f-text'))
const textValue = element.getAttribute('f-text');
element.innerHTML = window.fStore[textValue];
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p f-text="name"></p>
</body>
</html>【讨论】：
我试过了，它不再给我错误，但页面保持空白。 @TacoSnack 将带有 JS 文件的脚本标签移动到p 标签之后。这可能是因为当您尝试选择元素时，该元素不在 DOM 中。
那也没用。
@TacoSnack 也可以在选择元素之前调用store。基本上就是把sn-p里面的JS复制到文件里就行了。【参考方案2】：
您可能还需要等到窗口首先加载。如果你不这样做，有些浏览器会让你头疼
window.addEventListener('load', e=>
window.Framework =
store: (key, value = '') =>
if(!window.fStore)
window.fStore = ;
if (value === '')
return window.fStore[key];
window.fStore[key] = value;
window.Framework.store('name', 'Joe');
document.querySelectorAll('*').forEach((element) =>
if (element.hasAttribute('f-text'))
element.innerHTML = window.fStore[element.getAttribute('f-text')];
);
【讨论】：
当我这样做时，我得到这个错误：ReferenceError: Framework is not defined at /:12:5
抱歉希望编辑修复它
我在<script>标签中有Framework.store()，而不是在JS文件中。以上是关于无法在键值存储中设置未定义的属性的主要内容，如果未能解决你的问题，请参考以下文章
错误 _renderer.setElementStyle “无法在 [null] 中设置未定义的属性‘背景颜色’”