React Leaflet地图组件初始渲染前如何避免坐标值未定义？

核心错误点 #

• 普通变量无法跨渲染保存值：你用let声明的initialPositionLat和initialPositionLong是组件渲染时的局部变量，每次组件重渲染都会重新初始化。useEffect里修改的是第一次渲染的变量，当setIsLoading(false)触发重渲染时，新的变量又变成undefined，导致地图组件报错。
• 拼写错误：else分支里的props.activityData.poylines少了一个字母l，应该是polylines，这会导致读取不到经纬度数据，变量始终为undefined。
• useEffect依赖缺失：原代码的useEffect依赖项为空数组，当props.activityData更新时不会重新计算初始位置，可能导致数据不同步。

修复后的代码 #

import { useState, useEffect } from 'react';
import { MapContainer, TileLayer, Polyline } from 'react-leaflet';

function Mapp(props) {
    const [isLoading, setIsLoading] = useState(true);
    // 用state保存初始位置，跨渲染保留值
    const [initialPosition, setInitialPosition] = useState([null, null]);

    function setInitPosition(data) {
        let lat, lng;
        // 先判断数据是否有效，避免读取属性报错
        if (!data) return;
        
        if (!Array.isArray(data)) {
            // 确保positions数组存在且有数据
            if (data.positions?.length > 0) {
                lat = data.positions[0][0];
                lng = data.positions[0][1];
            }
        } else {
            // 修复拼写错误：poylines → polylines
            if (data.polylines?.positions?.length > 0) {
                lat = data.polylines.positions[0][0];
                lng = data.polylines.positions[0][1];
            }
        }
        if (lat && lng) {
            setInitialPosition([lat, lng]);
        }
    }
    
    useEffect(() => {
        setInitPosition(props.activityData);
        // 延迟设置isLoading，确保位置已计算完成
        setTimeout(() => setIsLoading(false), 0);
    }, [props.activityData]); // 依赖props.activityData，数据更新时重新计算

    // 确保初始位置有效再渲染地图
    if (isLoading || !initialPosition[0] || !initialPosition[1]) {
        return (
            <div>
                <p>Loading...</p>
            </div>
        );
    }

    return (
        <MapContainer center={initialPosition} zoom={15} scrollWheelZoom={false}>
            <TileLayer 
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
                        
            {/* 优化条件判断，更严谨 */}
            {!Array.isArray(props.activityData) && props.activityData.positions && (
                <Polyline positions={props.activityData.positions} />
            )}

            {Array.isArray(props.activityData?.polylines) && props.activityData.polylines.length > 0 && 
                props.activityData.polylines.map((activity, idx) => (
                    <Polyline key={idx} positions={activity.positions} />
                ))}
        </MapContainer>
    );
}

export default Mapp;

关键修改说明 #

1. 改用state管理初始位置：用useState声明initialPosition，确保值在组件重渲染时不会丢失，修改时通过setInitialPosition触发重渲染。
2. 修复拼写错误：把poylines修正为polylines，确保能正确读取经纬度数据。
3. 添加数据有效性检查：用可选链操作符?.避免数据未定义时读取属性报错，同时判断数组长度确保有可用的经纬度。
4. 完善useEffect依赖：将props.activityData加入依赖项，当传入的数据更新时自动重新计算初始位置。
5. 优化渲染条件：在渲染地图前先检查初始位置是否有效，避免无效值传入MapContainer导致报错。

内容的提问来源于stack exchange，提问作者program.exe