.map不是功能反应，轴问题

Question

使用地图功能，我有一些问题。

在以下代码中，我使用Axios通过稀有的API获取NFT数据（效果很好，我可以将对象作为响应得到承诺），

import Link from 'next/link'
import { useWeb3Context } from '../../context'
import { Web3Button } from '../../components'
import axios from 'axios'
import React, { useState } from 'react'
import NFTContainer from '@/components/NFTContainer'

const renderNotConnectedContainer = () => <Web3Button />

const fetchOwnedTokens = async (owner) => {
  try {
    const result = await axios.get(`https://ethereum-api.rarible.org/v0.1/nft/items/byOwner?owner=${owner}`)

    return [result.data.items]
  } catch (err) {
    console.error(err)
    return []
  }
}

export const ChooseProductView = () => {
  const { address } = useWeb3Context()

  if (!address) {
    return renderNotConnectedContainer()
  } else {
    const data = fetchOwnedTokens(address)
    console.log(data)

    return (
      <div className="flex items-center justify-center">
        <NFTContainer nfts={data} />
      </div>
    )
  }
}

然后我试图使用道具将响应传递给容器文件，但我得到了一个错误 - 无手工运行时错误 TypeError：nfts.map不是功能 我认为这是因为NFT不是数组数据类型。有什么建议吗？被卡住了一段时间

import React from 'react'
import NFTCard from './NFTCard'

const NFTContainer = ({ nfts }) => {
  return (
    <div>
      {nfts.map((nft, index) => (
        <NFTCard nft={nft} key={index} />
      ))}
    </div>
  )
}

export default NFTContainer

Answer 1

您无法在对象上使用地图，因此应该将其转换为：

<div>
  {Object.keys(nfts).map((nft, index) => (
    <NFTCard nft={nft} key={index} />
  ))}
</div>