React Leaflet通过useEffect获取API数据后Marker无法渲染问题排查

核心问题1：错误修改State数组，未触发组件更新 #

你在useEffect里直接通过arr.push(data[i])修改state数组，这是直接修改React State的可变操作，React无法检测到state的变化——即便你设置了dataLoaded=true，组件也不会基于更新后的数组重新渲染标记。

修复方法： #

使用setArr来更新数组，替换原有的循环push逻辑：

const [arr, setArr] = React.useState([]);
const [dataLoaded, setDataLoaded] = React.useState(false);

useEffect(() => {
    axios.get('http://localhost:8000/get-data/')
    .then(res => {
        if (res.data) {
          // 通过setArr更新状态，确保React能检测到变化
          setArr(prevArr => [...prevArr, ...res.data]);
        }
    })
    .then(() => {
      setDataLoaded(true);
    })
}, [])

更简洁的写法：

useEffect(() => {
  axios.get('http://localhost:8000/get-data/')
    .then(res => {
      if (res.data?.length) {
        setArr(res.data);
        setDataLoaded(true);
      }
    })
}, [])

核心问题2：经度值超出Leaflet有效范围 #

你调试输出的经度是-199.41，但Leaflet支持的地理坐标范围是：

• 纬度：-90° ~ 90°
• 经度：-180° ~ 180°

-199.41超出了经度的有效范围，标记会被渲染到地图可视区域之外，自然无法显示。而你手动输入的-119.41在有效范围内，所以能正常显示。

修复方法： #

1. 优先检查后端API返回的经度数据是否有误，修正数据源的错误值；
2. 前端添加坐标校验，将超出范围的经度转换为有效值（比如取模处理）：

// 标准化经度到-180~180范围
const normalizeLongitude = (lon) => {
  const normalized = lon % 360;
  return normalized > 180 ? normalized - 360 : normalized;
};

// 渲染标记时使用
{ dataLoaded ? <Marker position={[
  parseFloat(arr[0].latitude), 
  normalizeLongitude(parseFloat(arr[0].longitude))
]}> 
    <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
</Marker> : <></> }

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