React调用REST Countries API后，useState数组映射无输出问题排查

问题描述 #

开发调用REST Countries API的网页时，使用useEffect在首次渲染时获取数据并存入useState数组，但页面通过三元运算符映射该数组时始终无数据输出（返回null），不过控制台能看到数组内已有数据，需排查原因并确认三元运算符的使用是否正确。

原代码 #

const LightMode = () => {
    const [data, setData] = useState([])

    useEffect(() =>{
        axios.get('https://restcountries.com/v3.1/all').then(res=>{
            let toInsert = res.data.map((country) =>({
                name: country.name.common,
                population: country.population,
                region: country.region,
                capital: country.capital,
                image: country.coatOfArms.png
            }))

            setData((prev) => [...prev, ...toInsert])
        })
    }, [])

    console.log(data)
    return(
        <div>
            <NavigationBar />
            <div className='temp'>
                {data ? data.map((country) =>{
                    <div>
                        country.name
                    </div>
                }) : null}
            </div>
        </div>
    )
}

export default LightMode;

问题分析与解决 #

1. 核心问题：map回调未返回JSX元素 #

你的map回调使用了大括号{}，但没有显式返回JSX元素，导致map最终返回的是一个全为undefined的数组，页面自然不会渲染任何内容。

2. 次要问题：JSX变量未用{}包裹 #

country.name作为变量，需要用{}包裹才能被解析为JS表达式，否则会被当作普通字符串显示。

3. 冗余的三元判断 #

data初始值是空数组[]，在JavaScript中空数组属于真值（truthy），所以data ? ... : null的判断完全多余，直接对data执行map即可，空数组的map会返回空，不会影响页面。

4. 可选优化：setData的写法 #

初始data是空数组，直接setData(toInsert)即可，不需要展开prev（因为prev是空数组，展开后没有实际意义）。

修正后的代码 #

const LightMode = () => {
    const [data, setData] = useState([])

    useEffect(() =>{
        axios.get('https://restcountries.com/v3.1/all').then(res=>{
            const toInsert = res.data.map((country) =>({
                name: country.name.common,
                population: country.population,
                region: country.region,
                capital: country.capital?.[0], // 处理部分国家无首都的情况
                image: country.coatOfArms.png
            }))
            // 直接赋值即可，无需展开prev
            setData(toInsert)
        })
    }, [])

    console.log(data)
    return(
        <div>
            <NavigationBar />
            <div className='temp'>
                {/* 直接map，空数组无输出，无需三元判断 */}
                {data.map((country) => (
                    // 用小括号实现隐式返回，或者加return
                    <div key={country.name}> {/* 注意添加唯一key，避免React警告 */}
                        {country.name} {/* 变量用{}包裹 */}
                    </div>
                ))}
            </div>
        </div>
    )
}

export default LightMode;

补充说明 #

• 注意给map返回的元素添加唯一key（这里用country.name，确保每个国家名称唯一），避免React控制台警告。
• 部分国家可能没有capital（返回数组）或coatOfArms.png，建议添加可选链操作符（比如country.capital?.[0]），避免出现渲染错误。

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