如何确保传递Props前State非空？React地图组件问题咨询

核心问题分析 #

1. Mapp组件中polylines状态更新是异步的，isLoading过早设为false，导致数据未准备好就传递给MapComp
2. Mapp的return语句存在语法错误，传递的props格式不正确
3. MapComp中getInitPosition未做安全校验，直接访问深层属性引发空指针错误，还存在拼写错误（poylines应为polylines）
4. MapComp的useEffect未判断数据有效性就关闭loading，导致提前渲染地图组件

分步修复方案 #

1. 修正Mapp组件的状态控制与props传递 #

修复异步状态更新问题，确保polylines完全准备好后再渲染MapComp：

import React from 'react';
import { useState, useEffect} from 'react';
import axios from 'axios';
import polyline from '@mapbox/polyline';
import MapComp from './MapComp';

function Mapp() {
    const [activities, setActivities] = useState([]);
    const [polylines, setPolylines] = useState([]);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => { 
        setActivitieData();
    }, [])

    useEffect(() => {
        if(activities.length) {
            // 等待polylines更新完成后再关闭loading
            setPolylineArray().then(() => setIsLoading(false));
        }
    }, [activities])

    const getActivityData = async () => {
        const response = await axios.get("http://localhost:8800/api/");
        return response.data;
    };

    const setActivitieData = async () => {
        const activityData = await getActivityData();
        setActivities(activityData);
    };

    const setPolylineArray = async () => {
        const polylineArray = [];
        for(let i = 0; i < activities.length; i++) {
            const polylineData = activities[i].map.summary_polyline;
            const activityName = activities[i].name;
            const activityType = activities[i].type;
            
            polylineArray.push({
                positions: polyline.decode(polylineData), 
                name: activityName, 
                activityType: activityType 
            });
        }
        setPolylines(polylineArray);
    }

    return (
        !isLoading && polylines.length > 0 ?
        <MapComp activityData={{ polylines }} />
        : <div><p>Loading...</p></div>
    )
}

export default Mapp;

2. 优化MapComp组件的初始化与数据安全访问 #

增加数据校验，修复拼写错误，确保安全获取初始位置：

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

function MapComp(props) {
    const [isLoading, setIsLoading] = useState(true);
    const [initPosition, setInitPosition] = useState(null);

    useEffect(() => {
        // 先校验props有效性
        if (!props.activityData?.polylines || props.activityData.polylines.length === 0) {
            setIsLoading(true);
            return;
        }
        
        const position = getInitPosition(props.activityData);
        setInitPosition(position);
        setIsLoading(false);
    }, [props])

    // 安全获取初始位置，增加多层校验
    function getInitPosition(activityData) {
        // 处理多折线情况
        if (activityData.polylines?.length > 0) {
            const firstPolyline = activityData.polylines[0];
            if (firstPolyline.positions?.[0]) {
                return firstPolyline.positions[0];
            }
        }
        // 处理单折线兼容场景
        else if (activityData.positions?.[0]) {
            return activityData.positions[0];
        }
        // 无有效数据时返回默认坐标（示例：北京）
        return [39.9042, 116.4074];
    }

    return (
        !isLoading && initPosition ?
        <MapContainer center={initPosition} zoom={15} scrollWheelZoom={false} style={props.style}>
            <TileLayer 
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
                        
            {/* 单折线渲染逻辑 */}
            {props.activityData.positions && !props.activityData.polylines && 
                <Polyline positions={props.activityData.positions} >
                    <Popup>
                        <div>
                            <h2>{"Name: " + props.activityData.name}</h2>
                        </div>
                    </Popup>
                </Polyline>
            }

            {/* 多折线渲染逻辑 */}
            {props.activityData.polylines?.length > 0 && 
                props.activityData.polylines.map((activity, idx) => (
                    <Polyline key={idx} positions={activity.positions}>
                        <Popup>
                            <div>
                                <h2>{"Name: " + activity.name}</h2>    
                            </div>    
                        </Popup>    
                    </Polyline>
                ))
            }
        </MapContainer>
        : <div><p>Loading...</p></div>
    )
}

export default MapComp;

关键改进点总结 #

• Mapp组件：
  • 等待异步函数执行完成后再关闭loading，确保polylines状态更新完成
  • 修正props传递的语法错误，确保格式正确
  • 增加polylines.length > 0判断，避免传递空数组
• MapComp组件：
  • 使用useState存储初始位置，避免render阶段重复计算
  • 增加多层可选链校验，彻底避免空指针错误
  • 修复poylines拼写错误
  • 提供默认初始坐标，保证无数据时组件不崩溃
  • 优化渲染条件，只有初始位置有效时才渲染地图

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