React Leaflet通用组件渲染时props数据为null的问题排查

问题背景 #

我开发了一个可处理单条数据与数组数据的React Leaflet通用地图组件，单条数据的LandingPage组件能正常渲染地图，但数组数据页面调用getInitPosition()时返回null。排查发现组件渲染时props为空，后续数据才加载完成。未抽离通用组件时数组场景正常工作，现在能正确生成polylineArray，但调用setPolylines(polylineArray)后打印polylines状态仍为空，数据获取逻辑和单数据场景类似，不清楚问题出在哪，想知道如何确保polylines非空后再作为props传递。

核心问题分析 #

1. React状态更新异步性：调用setPolylines(polylineArray)后立刻打印polylines为空是正常现象——React状态更新是异步批量处理的，无法在设置状态后立即读取最新值。
2. 加载状态控制逻辑错误：原Map组件中，当activities有数据后直接设置isLoading=false，但此时polylines的状态更新尚未完成，导致MapComp接收到的polylines可能是空数组。
3. 通用组件props处理错误：
   • 数组场景传递的activityData是{ polylines }（包含数组的对象），但getInitPosition错误判断props.activityData是否为数组，导致逻辑走岔。
   • 拼写错误：poylines应为polylines，直接导致读取不到数据返回null。
   • 数组渲染条件错误：length > 1会过滤掉单条数据的情况，应改为length > 0。
4. 初始化位置安全校验缺失：未判断positions是否为空，若数据异常会直接报错。

修正后的代码 #

数组数据地图组件（Map.js） #

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

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

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

  // 监听polylines状态，确保轨迹数据准备完成再关闭加载状态
  useEffect(() => {
    if (polylines.length > 0) {
      setIsLoading(false);
    }
  }, [polylines]);

  useEffect(() => {
    if (activities.length) {
      setPolylineArray();
    }
  }, [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 = () => {
    const polylineArray = activities.map(activity => ({
      positions: polyline.decode(activity.map.summary_polyline),
      name: activity.name,
      activityType: activity.type,
    }));
    setPolylines(polylineArray);
  };

  return isLoading ? (
    <div>
      <p>Loading...</p>
    </div>
  ) : (
    <MapComp activityData={{ polylines }} />
  );
}

export default Map;

通用地图组件（MapComp.js） #

import React from "react";
import { MapContainer, TileLayer, Popup, Polyline } from "react-leaflet";

function MapComp(props) {
  const { activityData } = props;

  // 安全获取初始化位置，添加多层空值校验与兜底逻辑
  function getInitPosition() {
    // 单条数据场景：直接读取positions
    if (activityData.positions && activityData.positions.length > 0) {
      return activityData.positions[0];
    }
    // 数组数据场景：读取第一条轨迹的positions
    if (activityData.polylines && activityData.polylines.length > 0) {
      const firstPolyline = activityData.polylines[0];
      return firstPolyline.positions && firstPolyline.positions.length > 0 
        ? firstPolyline.positions[0] 
        : [0, 0];
    }
    // 兜底默认位置
    return [0, 0];
  }

  const initPosition = getInitPosition();

  return (
    <MapContainer center={initPosition} 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"
      />
      {/* 单条数据渲染逻辑 */}
      {activityData.positions && (
        <Polyline positions={activityData.positions}>
          <Popup>
            <div>
              <h2>{"Name: " + activityData.name}</h2>
            </div>
          </Popup>
        </Polyline>
      )}
      {/* 数组数据渲染逻辑 */}
      {activityData.polylines && activityData.polylines.length > 0 &&
        activityData.polylines.map((activity, idx) => (
          <Polyline key={idx} positions={activity.positions}>
            <Popup>
              <div>
                <h2>{"Name: " + activity.name}</h2>
              </div>
            </Popup>
          </Polyline>
        ))}
    </MapContainer>
  );
}

export default MapComp;

关键修正说明 #

1. 调整加载状态触发时机：将isLoading的关闭逻辑从监听activities改为监听polylines，确保只有轨迹数据完全处理完成后才渲染地图组件。
2. 优化轨迹数组生成：用map替代for循环，代码更简洁易读。
3. 修复props判断逻辑：区分单条数据（含positions属性）和数组数据（含polylines数组）的场景，避免错误的数组判断。
4. 修复拼写错误：将poylines修正为polylines，解决数据读取失败的问题。
5. 增加安全校验：在获取初始化位置和渲染组件时添加多层空值判断，避免数据异常导致的报错，同时设置默认兜底位置。
6. 移除无效状态打印：状态更新是异步的，设置后立即打印无法获取最新值，直接移除避免误解。

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