Javascript数组没有长度

Question

我正在尝试使用THIRDWEB从不同的合同中获取所有nfts。首先，我从sanity获取契约地址(这非常好)，然后我尝试获取nfts (您使用useNFTCollection钩子，然后使用函数getOwned)。

尽管我接收到的数组(dataArray)，我可以看到它的元素(所有的NFT)，但我不能访问数组中的任何元素(它总是返回未定义的)，也不能访问数组的长度。

数组如下所示

然而，如果我试图获取这个数组的长度，它只返回未定义的值。

守则：

import React, { useState, useEffect } from "react";
import Header from "../../components/Header/Header";
import UserImages from "../../components/Profile/UserImages";
import UserInfo from "../../components/Profile/UserInfo";
import { client } from "../../lib/sanityClient";
import { useNFTCollection } from "@thirdweb-dev/react";
import { useRouter } from "next/router";

export async function getServerSideProps({}) {
  const query = `*[_type == "marketItems"]  {
    contractAddress,
  }`;

  const data = await client.fetch(query);

  return {
    props: {
      data,
    },
  };
}

function profile({ data }) {
  const [nfts, setNfts] = useState({});

  const router = useRouter();
  const { wallet } = router.query;
  let dataArray = [];

  if (data[0] !== undefined) {
    if (dataArray === undefined || dataArray.length < 1) {
      dataArray = [];
    }
    for (let i = 0; i < data.length; i++) {
      const collection = useNFTCollection(data[i].contractAddress);

      async function getNfts() {
        if (collection !== undefined) {
          await collection.getOwned(wallet).then((res) => {
            Promise.all(res).then((values) => {
              for (let i = 0; i < values.length; i++) {
                dataArray.push(values[i]);
              }
            });
          });
        }
      }
      getNfts();
    }
    console.log(dataArray);
  }

  return (
    <div>
      <Header />
      <UserImages />
      <UserInfo />
    </div>
  );
}

export default profile;

如何访问dataArray的内容？我如何将它赋值给任何状态变量？请注意，我是这样使用这个循环的，因为useNFTCollection是一个钩子，它不允许我在任何useEffect或useMemo中使用它。

哦，在这个例子中，我使用的是nextJS。

Answer 1

我解决了问题。

我不得不以某种方式使我的数据进入状态，我添加了一个独立的迭代器来帮助我(以防止无限循环)。

我花了很长时间才弄明白，在nextJS/React中创建一个无限循环非常简单。