我试图在我的页面上显示 Nfts，但它给出了错误，如 Uncaught TypeError：无法读取未定义的属性（读取“map”）。所以我的 nfts 变量是一个数组，但仍然无法映射。这是我的组件：

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";
    const [nfts, setNfts] = useState();
    const getNftData = () => {
        axios.get(``)
            .then(output => {
                setNfts(output.data.result)
        })
    }
    useEffect(() => {
        getNftData();
    }, []);
    return (
        <section className="my-nfts">
            <Container>
                <Row>
                    {nfts == '' ?
                        <><div className='mynft-title'>My NFTs</div>
                            <div className="empty-nft">There is no NFT to display</div></> : (
                            <>
                                {nfts.map((nft, index) => {
                                    if (nft.from == sender && nft.to == walletAddress) {
                                        <Col xs={12} md={12} lg={4}>
                                            <div key={index}>{nft}</div>
                                        </Col>

                                    }
                                })}
                            </>
                        )}
                </Row>
            </Container>
        </section>
    );
}

export default Nfts;

所以我相信它在页面加载时第一次不会呈现。但我可能是错的。你认为我做错了什么？谢谢..