数组显示为空，但应该有一个元素

Question

好的，伙计们，我在我一直在处理的一些代码上遇到了问题。在下面的代码中，我试图通过控制台记录数组的长度，但是在打印到控制台后，我得到数组长度的输出 0，当我打印数组本身时，它显示它是空的，但我可以单击下拉箭头并查看其中的元素。

// randomly selects card from array

export const selectCard = arr => {

    const randomArr = Math.floor(Math.random() * arr.length);

    console.log(arr.length);

    console.log(arr);

}

记录数组长度和内部包含元素的空数组的图像。

为了测试发生了什么，我决定将数组记录在一个不同的函数中，该函数位于创建数组的同一文件中。数组 ( blackCards) 存储在一个对象中。

let packArr = {

  data: {},

  packToUse: [],

  whiteCards: [],

  blackCards: [],

};

blackCards控制台在另一个函数中记录数组 ( ) 会记录以下内容：

const seperatePacks = (data) => {

  // add white cards to array

  packArr.whiteCards.push(data.whiteCards);

  // add black cards to array

  packArr.blackCards.push(data.blackCards);

  // console log blackCards array

  console.log(packArr.blackCards);

};

来自不同函数的记录数组的图像，该函数位于创建和存储数组的同一文件中。

这里有更多关于我的代码如何工作的信息。当用户单击按钮时，将激活一个事件侦听器，该侦听器调用最终从服务器获取 json 的其他函数，然后我将该数据添加到数组中，您可以在上面的代码中看到。因此，既然您知道代码是如何工作的，那么我就可以了解导致我更加困惑的原因。所以，在第一次点击时，我得到了所有先前代码和图像组合的结果，但是如果我再次点击同一个按钮，或者点击不同的按钮，我会得到想要的结果（如果我点击两个按钮我得到数组中的两个元素，所以它工作正常）。因此，单击两次或多次，程序就会按应有的方式运行。这里的任何帮助都会很棒。如果这篇文章有点磨损也很抱歉，这是我的第一篇。

以下是最终调用的函数selectCard

elements.packs.addEventListener("click", (e) => {

  const packID = e.target.closest(".pack").id;

  if (packID) {

    packsToUse(packID);

    // create black cards

    blackCardDisplay(packArr.blackCards);

  }

});

上面是前面提到的监听器，它调用下面的函数，它会调用selectCard.

export const blackCardDisplay = data => {

    const card = `

        <div class="cards card--black">

            <h1 class="card--black-text card--text">${selectCard(data)}</h1>

        </div>

    `;

}

这是按下两个按钮后的输出。该数组应该包含两个元素，但在这种情况下它只显示一个。但是，当我展开数组时，它显示的长度为 2 而不仅仅是 1。

单击两次按钮的控制台图像

编辑：在阅读了一些评论后，我意识到我忘了提到的内容blackCards是一个数组。所以我在一个数组中有一个数组。

Answer 1

因此，在阅读了一些评论后，我决定实施@charlietfl 的评论，即数组可能在 ajax 调用完成之前被控制台记录。虽然这并没有明确解决问题，但它让我走上了解决方案的正确轨道。这是我解决这个问题的方法：我接受了关于在 ajax 调用完成之前完成控制台日志的评论，并从那里进行了一些研究，发现了这篇非常简单的文章：https://www.programmersought.com/article/26802083505/在这篇文章中是一个使用该setTimeout()方法的例子。这是我的问题的最终解决方案。export const selectCard = arr => {&nbsp; &nbsp; const randomArr = Math.floor(Math.random() * arr.length);&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(arr.length);&nbsp; &nbsp; &nbsp; &nbsp; console.log(arr)&nbsp; &nbsp; }, 1000);}这是在setTimeout()第一次按下按钮时添加方法后的输出。解决的数组长度和数组控制台日志的图像我不知道这是否是该问题的最佳解决方案，因为过去我看到有些人不赞成使用这种方法，但它对于我目前正在做的事情来说效果很好。如果有人有更好的方法来解决这个问题，我很想听听！