React循环状态数组渲染JSX组件时触发TypeError问题

问题根源 #

• 你在更新状态时用了setUrls(...res.data.nfts)，扩展运算符把数组res.data.nfts的元素逐个展开，导致urls被设置成了数组的第一个元素（对象类型），而非完整数组，自然无法调用map方法。
• 另外，你需要的是每个NFT对象里media[0].uri路径的图片地址，直接存储整个NFT对象到状态中，后续传递的url也不是正确的目标地址。

修正方案 #

直接保存完整的NFT数组到状态，遍历的时候提取正确的图片地址即可，以下是修正后的完整代码：

import axios from "axios";
import React, { useEffect, useState } from "react";
import NFTCard from "./NFTCard";

function ViewNFT() {
  const api_key = "witheld for privacy";
  const address = "witheld for privacy";

  const [nfts, setNfts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios
      .get(
        `https://flow-testnet.g.alchemy.com/v2/${api_key}/getNFTs/?owner=${address}&offset=0&limit=10`
      )
      .then(res => {
        setNfts(res.data.nfts); // 直接传入完整数组，保证状态是数组类型
        setLoading(false);
      })
      .catch(err => {
        console.log(err);
        setLoading(false);
      });
  }, []);

  // 请求未完成时显示加载提示
  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <>
      {nfts.map((nft, id) => {
        // 用可选链操作符避免media为空时报错，提取正确的图片地址
        const imageUrl = nft.media?.[0]?.uri;
        return imageUrl ? (
          <div key={id}>
            <NFTCard pharaoh_url={imageUrl} />
          </div>
        ) : null;
      })}
    </>
  );
}

export default ViewNFT;

关键修改说明 #

1. 状态更新修正：去掉扩展运算符，直接用setNfts(res.data.nfts)保存完整数组，确保状态是数组类型，能正常使用map方法。
2. 图片地址提取：遍历NFT数组时，通过nft.media?.[0]?.uri获取目标图片地址，可选链?.可以防止media数组为空或不存在时抛出错误。
3. 加载状态优化：添加loading状态，在请求未完成时显示提示，提升用户体验，同时避免请求过程中可能出现的渲染异常。

内容的提问来源于stack exchange，提问作者Matt