这个问题没有显示出任何研究努力;我创建了一个通用组件，用于两种情况，一种情况是处理单个数据，另一种情况是处理数据数组。我试图在react传单Map上绘制此数据。现在，它适用于处理单个数据图的landingPage组件。以前，在我将props传递给泛型组件进行呈现之前，我也让它为我的数据数组工作。问题是，当我尝试加载负责显示带有数据数组的Map的页面时，当getInitPosition（）函数被调用，因为当呈现组件时 prop 数据似乎为空，但在其之后不为空，我通过控制台日志检查了这一点。我对它在单个组件中的工作方式感到困惑，而不是数据组件数组中的工作方式，因为检索数据的调用非常相似。有人能看出我哪里出错了吗？看起来是这样的，虽然我的polyineArray设置了正确的值，然后我打印出折线的状态，以检查它是否在调用setPolylines（polylineArray）后设置，但它似乎是空的，我不知道为什么？我如何才能确保折线的状态不为空，然后再将其作为 prop 传递

• • Map数据组件数组**

import react from "react";
import { useState, useEffect } from "react";
import { MapContainer, TileLayer, Popup, Polyline } from "react-leaflet";
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();
  }, []);

  useEffect(() => {
    if (activities.length) {
      setPolylineArray();
      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 = () => {
    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,
      });
    } // should push activity type as well
    setPolylines(polylineArray);
    //setIsLoading(false);
    console.log("Polyline array = ", polylineArray);
    console.log("polylines = ", polylines);
  };

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

export default Map;

• • 常规Map组件**

import react from "react";
import { MapContainer, TileLayer, Popup, Polyline } from "react-leaflet";
import polyline from "@mapbox/polyline";
import { useEffect, useState } from "react";

function MapComp(props) {
  function getInitPosition() {
    console.log("props activity data = ", props);
    if (!Array.isArray(props.activityData)) {
      return [
        props.activityData.positions[0][0],
        props.activityData.positions[0][1],
      ];
    } else {
      return [
        props.activityData.poylines.positions[0][0],
        props.activityData.poylines.positions[0][1],
      ];
    }
  }

  return (
    <MapContainer center={getInitPosition()} 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) && (
        <Polyline positions={props.activityData.positions}>
          <Popup>
            <div>
              <h2>{"Name: " + +props.activityData.name}</h2>
            </div>
          </Popup>
        </Polyline>
      )}
      {Array.isArray(props.activityData.polylines) &&
        props.activityData.polylines.length > 1 &&
        props.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;