node.js - 页面渲染速度快于我的数据获取速度

Question

我试图在加载页面时在 map 上显示一些长和纬度数据，但似乎我的页面渲染速度比获取数据的速度快。

数据已正确检索，我已经测试了 API 调用。

谁能看到我错过了什么

我尝试使用 useEffect Hook ，但似乎仍然不起作用:

这是我的组件:

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";

function Map() {
  const [activites, setActivities] = useState([]);
  const [polylines, setPolylines] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    setActivitieData();
    setPolylineArray();
    setIsLoading(false);
  }, []);

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

    return response.data;
  };

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

  const setPolylineArray = () => {
    const polylineArray = [];
    for (let i = 0; i < activites.length; i++) {
      const polylineData = activites[i].map.summary_polyline;
      const activityName = activites[i].name;
      polylineArray.push({ positions: polyline.decode(polylineData), name: activityName });
    }
    setPolylines(polylineArray);
    console.log("Polyline array = ", polylineArray);
  };

  return !isLoading ? (
    <MapContainer center={[37.229564, -120.047533]} zoom={15} scrollWheelZoom={false} style={{ width: "100%", height: "calc(100vh - 4rem)" }}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {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 Map;

Answer 1

你会度过一段美好的时光

• 数据加载库，例如 swr处理与从 API 获取数据相关的状态(除了 data 之外，您可能对 isError 和 isValidating 等感兴趣；请参阅到文档)，
• 和useMemo for the derived polyline state (因为它始终完全可以从您获取的事件导出，并且不需要单独更新状态)。

类似这样的东西(可以理解，如果没有您的 API 等，我无法测试它，但它应该可以工作)。

import { MapContainer, Polyline, Popup, TileLayer } from "react-leaflet";
import axios from "axios";
import polyline from "@mapbox/polyline";
import React from "react";
import useSWR from "swr";

function getJSON(url) {
  return axios.get(url).then((res) => res.data);
}

function Map() {
  const activitySWR = useSWR("http://localhost:8080/api/data", getJSON);
  const activities = activitySWR.data ?? null;
  const polylines = React.useMemo(() => {
    if (!activities) return null; // no data yet
    const polylineArray = [];
    for (const item of activities) {
      const polylineData = item.map.summary_polyline;
      polylineArray.push({ positions: polyline.decode(polylineData), name: item.name });
    }
    return polylineArray;
  }, [activities]);
  if (!activities) {
    return <div>Loading...</div>;
  }
  return (
    <MapContainer
      center={[37.229564, -120.047533]}
      zoom={15}
      scrollWheelZoom={false}
      style={{ width: "100%", height: "calc(100vh - 4rem)" }}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {polylines.map((activity, idx) => (
        <Polyline key={idx} positions={activity.positions}>
          <Popup>
            <div>
              <h2>{`Name: ${activity.name}`}</h2>
            </div>
          </Popup>
        </Polyline>
      ))}
    </MapContainer>
  );
}

export default Map;