在useEffect钩子中加载Props后设置状态以调用API的问题

你的代码存在几个核心问题，导致addr始终为undefined、API调用失败：

• 错误在普通函数内嵌套useEffect：React规定useEffect只能在组件顶层作用域调用，放在GetNFT这类自定义函数里的useEffect会被直接忽略。
• 组件渲染时直接调用GetNFT：这会导致组件每次渲染都执行该函数，但此时addr可能还没被异步更新完成，自然拿不到正确地址。
• 第一个useEffect依赖为空数组：如果父组件传入的useraddress后续发生变化，addr不会同步更新；而且setAddr是同步操作，完全没必要用async函数包裹。
• addr初始值设为数组不合理：用户地址是字符串类型，初始值设为''或null才符合逻辑，避免拼接API地址时出现owner=[]的无效参数。

修正后的代码 #

const Fetch = (props) => {
    const api_key = process.env.REACT_APP_API_KEY;
    // 地址初始值设为空字符串，匹配实际数据类型
    const [addr, setAddr] = useState('');
    const [data, setData] = useState([]);

    // 监听父组件传入的地址变化，同步更新本地状态
    useEffect(() => {
        setAddr(props.useraddress);
    }, [props.useraddress]); // 依赖项添加props.useraddress，地址变化时自动触发更新

    // 封装NFT数据获取逻辑
    const fetchNFTs = async () => {
        // 地址为空时不发起请求，避免无效调用
        if (!addr) return;
        
        try {
            const res = await axios.get(
                `https://flow-testnet.g.alchemy.com/v2/${api_key}/getNFTs/?owner=${addr}&offset=0&limit=10`
            );
            setData(res.data.nfts);
        } catch (err) {
            console.log(err);
        }
    };

    // 当addr更新时自动调用API获取数据
    useEffect(() => {
        fetchNFTs();
    }, [addr, api_key]); // 依赖addr和api_key，确保地址或密钥变化时重新请求

    console.log('当前用户地址:', addr);
    console.log('获取到的NFT数据:', data);

    return (
        <div>
            {data.map((dat, id) => (
                <div key={id}>
                    <FetchData NFTData={dat} />
                </div>
            ))}
        </div>
    );
};

关键修正说明 #

1. 规范useEffect使用：将API调用逻辑放在顶层useEffect中，依赖addr的变化，确保地址有效时才发起请求。
2. 同步props变化：通过监听props.useraddress，保证父组件传入的地址更新时，本地addr状态能同步跟进。
3. 增加空值校验：调用API前先判断addr是否为空，避免发送无效请求。
4. 简化异步逻辑：用async/await替代.then/.catch，让异步代码更易读。

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