React Native API获取的地图Marker不显示，markers常量为undefined

Marker无法渲染、打印markers显示undefined的核心原因有4个：

• 打印位置错误：你在data.map的遍历回调函数中执行console.log(markers)，此时markers常量还未完成赋值，属于变量初始化的暂存死区阶段，同时map遍历本身还没执行完成，所以打印结果必然是undefined，这个日志本身不代表数据异常，没有参考价值。
• 经纬度类型错误：该API返回的lat、lon字段是字符串格式，react-native-maps要求coordinate中的经纬度必须是Number类型，传入字符串不会抛出显性报错，但Marker会直接渲染失败。
• 坐标键名错误：react-native-maps的coordinate属性只识别latitude和longitude两个键名，你代码里写的lat、lon属于自定义键名，组件无法读取到正确的坐标值。
• 组件嵌套错误：Marker组件必须作为MapView的子组件渲染，你当前把所有Marker包裹在普通View组件中，没有挂载到MapView下，自然无法在地图图层上显示。

import React, {useState, useEffect} from 'react';
import { Marker, MapView }from 'react-native-maps'
import { View } from 'react-native';

function SupermarketList() {
    const [data, setData] = useState([]);

    useEffect( () => {
    fetch('http://api.postcodedata.nl/v1/postcode/?postcode=1211EP&streetnumber=60&ref=domeinnaam.nl&type=json', {
        headers: {
            'Cache-Control': 'no-cache',
        },
    })
    .then(response => response.json())
    .then(results => {
        // 增加接口结构判空，避免返回格式异常导致后续遍历报错
        if (results?.details) {
            setData(results.details);
        }
        console.log(results);
    })
    .catch(error => console.error(error));
}, []);

// 先校验data为数组再执行遍历，兼容初始值/接口异常场景
const markers = Array.isArray(data) ? data.map((supermarket, index) => {
    // 字符串经纬度转数字，同时匹配组件要求的键名
    const longitude = Number(supermarket.lon)
    const latitude = Number(supermarket.lat)
    return (
        <Marker 
            key={index} 
            coordinate={{ latitude, longitude }}
            title={supermarket.street || '地址点位'}
        />
    )
}) : null;

return (
    // Marker必须放在MapView组件内部，MapView需要设置尺寸样式否则不会显示
    <MapView
        style={{flex: 1}}
        initialRegion={{
            latitude: 52.2296,
            longitude: 5.1749,
            latitudeDelta: 0.05,
            longitudeDelta: 0.05,
        }}
    >
        {markers}
    </MapView>
)
}

export default SupermarketList

• Android端默认禁止http明文请求，如果接口请求失败，需要配置网络安全规则放开http限制，正式环境建议替换为https接口
• 如果修复后Marker仍不显示，可以在map遍历完成后（return语句之前）打印转换后的经纬度，确认数值在合理范围（纬度-90_{90、经度-180}180）
• 不要在map遍历回调内部打印markers变量，需要调试的话要在遍历逻辑执行完成后打印，才能拿到正确的元素数组

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