Alpine JS - VM11705:16 未捕获的类型错误:无法读取未定义的属性(读取“title”)错误问题
2022-09-08
775
然而,我使用 alpine js 创建了一个小部件,出现了类似错误,我找到了解决方案。您认为我的代码中有什么错误?当我提取数据时,标题部分显示不正确。但我看不出有什么问题。或者我无法弄清楚。
[我在控制台中看到的错误][1] [1]: https://i.sstatic.net/ofmW1.png
<div class="text-base w-56 px-5 rounded-full overflow-hidden" x-data="{
textArray: [],
text: '',
textIndex: 0,
charIndex: 0,
pauseEnd: 2750,
cursorSpeed: 420,
pauseStart: 20,
typeSpeed: 50,
direction: 'forward'
}" x-init="(() => {
fetch('/wp-json/wp/v2/pages/219/?_fields=acf.positions&acf_format=standard')
.then(response => response.json())
.then(data => textArray = data.acf.positions );
let typingInterval = setInterval(startTyping, $data.typeSpeed);
function startTyping(){
let current = $data.textArray[$data.textIndex].title;
if($data.charIndex > current.length){
$data.direction = 'backward';
clearInterval(typingInterval);
setTimeout(function(){
typingInterval = setInterval(startTyping, $data.typeSpeed);
}, $data.pauseEnd);
}
$data.text = current.substring(0, $data.charIndex);
if($data.direction == 'forward'){
$data.charIndex += 1;
} else {
if($data.charIndex == 0){
$data.direction = 'forward';
clearInterval(typingInterval);
setTimeout(function(){
$data.textIndex += 1;
if($data.textIndex >= $data.textArray.length){
$data.textIndex = 0;
}
typingInterval = setInterval(startTyping, $data.typeSpeed);
}, $data.pauseStart);
}
$data.charIndex -= 1;
}
}
setInterval(function(){
if($refs.cursor.classList.contains('hidden')){
$refs.cursor.classList.remove('hidden');
} else {
$refs.cursor.classList.add('hidden');
}
}, $data.cursorSpeed);
})()">
<span x-text="text"></span>
<span class="opacity-70" x-ref="cursor">|</span>
</div>
提前感谢您的建议和帮助。
1个回答
它抱怨说
$data.textArray[$data.textIndex]
未定义,而您正尝试从中读取
.title
。
首次加载小部件时,您会执行提取操作来填充
textArray
,但直到返回时,您的
textArray
都是空的,因此当您尝试调用
let current = $data.textArray[$data.textIndex].title
时,它会返回错误
您基本上需要确保 textArray 在尝试访问之前具有数据:
-
您可以将所有内容移到
.then(data => textArray = data.acf.positions );
中,因此它仅在调用提取操作后才启动。 -
或者您可以在您的
startTyping
函数,因此在 textArray 填充之前它不会尝试执行任何操作
可能不是您唯一的问题,但这是导致您发布的错误的原因
Rhyan-WoodsAndWalker
2022-09-08