React使用map函数渲染<li>仅显示项目符号无内容的问题

核心错误点 #

1. useState调用方式错误：你用了new useState(null)，但useState是React提供的函数，不是构造函数，不需要用new实例化。这个错误会导致stores状态无法正确接收API返回的数组，map函数根本不会执行。
2. DOM结构不符合规范：<ul>的直接子元素只能是<li>，你在map里返回的Fragment包含了<li>和独立的<img>，这会让<img>成为<ul>的直接子元素，浏览器会自动调整DOM结构，导致渲染异常。

修正后的完整代码 #

import { useEffect, useState } from "react";

export default function Home() {
    // 修正：去掉new，正确调用useState
    const [stores, setStores] = useState(null);
    const [error, setError] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const getStores = async () => {
            try {
                const response = await fetch("https://www.cheapshark.com/api/1.0/stores");
                if (!response.ok) throw new Error(`Error: ${response.status}`);

                let data = await response.json();
                console.log(data);
                setStores(data);
                setError(null);
            } catch(err) {
                setError(err.message);
                setStores(null);
            } finally {
                setIsLoading(false);
            }  
        }
        
        getStores()
    }, []);

    return (
        <>
            <h1>Stores</h1>
            {isLoading && <div>A moment please...</div>}
            {error && <div>{`Error while fetching data from API: ${error}`}</div>}

            <ul>
                {stores && stores.map(store => (
                    // 修正：将img放入li内部，用li作为map的返回元素
                    <li key={store.storeID}>
                        {store.storeName}
                        <img src={store.images.banner} alt={`${store.storeName} banner`} />
                    </li>
                ))}
            </ul>
        </>
    );
}

额外优化说明 #

• 修正了错误提示里的拼写错误（fething→fetching）
• 给<img>添加了alt属性，符合可访问性规范

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