开发者问题收集

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