React挂载阶段请求API渲染NFT报map未定义错误如何解决

你的判断成立，首次渲染时接口数据未返回就触发渲染是核心诱因，代码中一共存在4处明确问题：

• 状态初始值不符合预期：useState()未传入初始值时，nfts默认值为undefined，并非你预期的数组类型；同时你写的空状态判断nfts == ''仅能匹配空字符串，完全无法覆盖undefined、接口返回异常值的场景，空判断逻辑直接失效，首次渲染执行到nfts.map()时就会抛出类型错误。
• 列表渲染无返回值：map遍历的回调函数中，符合筛选条件的JSX元素没有写return，就算数据加载完成，匹配条件的NFT内容也无法被正常渲染到页面上。
• 缺少请求异常兜底：axios请求未加catch错误捕获，如果接口请求失败、或者返回结构中不存在result字段，nfts会被赋值为undefined，依旧会触发map调用错误。
• 列表key属性位置错误：循环生成的列表项key属性需要绑定在最外层的循环根元素上，你当前把key写在了内层div上，会触发React的列表key警告，影响渲染性能。

import React, { useState, useEffect } from "react";
import { Container, Row, Col } from 'react-bootstrap';
import axios from 'axios';
import { Link } from "react-router-dom";

const Nfts = ({ walletAddress }) => {
    const sender = "abc";
    const apikey = "def";
    // 初始值设为空数组，保证首次渲染时nfts是数组类型
    const [nfts, setNfts] = useState([]);
    const getNftData = () => {
        axios.get(``)
            .then(output => {
                // 兼容接口返回异常的情况，确保给setNfts传的永远是数组
                setNfts(output.data?.result || [])
            })
            .catch(err => {
                console.error("获取NFT列表失败:", err);
                // 请求出错时重置为空数组，避免报错
                setNfts([]);
            })
    }
    useEffect(() => {
        getNftData();
    }, []);
    return (
        <section className="my-nfts">
            <Container>
                <Row>
                    {nfts.length === 0 ?
                        <><div className='mynft-title'>My NFTs</div>
                            <div className="empty-nft">There is no NFT to display</div></> : (
                            <>
                                {nfts.map((nft, index) => {
                                    // 符合条件时return对应的JSX元素
                                    if (nft.from == sender && nft.to == walletAddress) {
                                        // key绑定到循环最外层元素Col上
                                        return <Col key={index} xs={12} md={12} lg={4}>
                                            <div>{nft}</div>
                                        </Col>
                                    }
                                    // 不符合条件返回null即可
                                    return null;
                                })}
                            </>
                        )}
                </Row>
            </Container>
        </section>
    );
}

export default Nfts;

• 把nfts的初始值设为[]，从根源避免首次渲染时nfts不是数组的问题
• 接口请求加了可选链?.和兜底值，同时加了catch错误捕获，任何异常场景下nfts都会被赋值为数组，不会触发map报错
• 空判断改成nfts.length === 0，可以正确覆盖初始加载、请求失败、接口返回空列表的所有空场景
• 补全了map回调里的return，调整了key属性的位置，保证列表可以正常渲染

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