React、Mapbox、Deck.GL 散点图层：数据未更新

如何解决React、Mapbox、Deck.GL 散点图层：数据未更新

我正在尝试创建一个在 MapBox 地图上使用deck.gl 的React 应用程序，但在更新deck.gl 散点图图层中的“数据”道具时遇到了问题。我遗漏了一些返回元素的代码，等等。我将数据道具初始化为空数组，然后使用 useEffect 钩子从数据库中获取数据，但图层的数据没有更新。

我猜这是因为我在我的deck.gl 层中使用状态变量列表作为数据道具。

1. 当我在检查器中检查数组的状态时，我看到“数据”道具仍然是空数组
2. 当我检查层所关联的数组的状态时，我发现它们不再是空的。因此，我在层的 props 中使用的数组！= 我从 Axios 获取数据后处于状态的数组。

是否需要在deck.gl 层上运行更新方法？

我还尝试在初始化层时直接使用承诺提取数据，但无济于事。

非常感谢....

import React,{ useContext,useEffect,useState } from "react";
import ReactMapGL from "react-map-gl";
import { DeckGL,MapController,ScatterplotLayer } from "deck.gl";
import { UserContext } from "../contexts/UserContext";
import { Dropdown,Image,SplitButton } from "react-bootstrap";
import soleTele from "../images/circle.png";
import solePower from "../images/cross.png";
import jointPole from "../images/circlecross.png";
import customer from "../images/triangle.png";
import centralOffice from "../images/CO.png";
import axios from "axios";

const libraries = ["places"];
const MAPBox_ACCESS_TOKEN =
  "pk.eyJ1IjoianJkdXJhbnQiLCJhIjoiY2tpczNsbzIxMHVtOTMwbHIxdGRpbTJjeSJ9.BBH2615udf6dhFsXcwXFjQ";

const mapContainerStyle = {
  width: "100%",height: "100%",};

const INITIAL_VIEW_STATE = {
  longitude: -122.41669,latitude: 37.7853,zoom: 10,pitch: 5,bearing: 0,};

const data = [{ position: [-122.45,37.78],message: "Hover over me" }];

export default function HomeMap() {
  const [hoverInfo,setHoverInfo] = useState();
  const [user,setUser] = useContext(UserContext);
  const [mode,setMode] = useState("Telephone Pole");
  const [soleTeles,setsoleTeles] = useState([]);
  const [solePowers,setsolePowers] = useState([]);
  const [jointPoles,setjointPoles] = useState([]);
  const [COs,setCOs] = useState([]);
  const [customers,setcustomers] = useState([]);
  const [viewport,setViewport] = useState({
    latitude: 32.7555,longitude: -97.3308,width: "100%",});

  const request = {
    networkID: user.networkID,};

  const [demoLayer,setdemoLayer] = useState(
    new ScatterplotLayer({
      id: "demo",data,getPosition: (d) => d.position,geTradius: 1000,getFillColor: [255,0],// Enable picking
      pickable: true,visible: true,// Update app state
      onHover: (info) => setHoverInfo(info),// onClick: (event) => console.log("HELP"),WORKS
    })
  );

  const [soleTeleLayer,setsoleTeleLayer] = useState(
    new ScatterplotLayer({
      id: "soleTele",data: soleTeles,getPosition: (d) => [d.long,d.lat],WORKS
    })
  );

OTHER LAYERS LEFT OUT...

  useEffect(() => {
    // Update the document title using the browser API
    axios
      .post("http://localhost:5000/poles/network",request)
      .then((res) => {
        console.log(res.data);
        res.data.forEach((pole) => {
          const newPole = {
            type: pole.type,id: pole._id,position: [pole.long,pole.lat],};
          console.log(newPole);
          if (pole.type === "Telephone Pole") {
            setsoleTeles((oldArray) => [...oldArray,newPole]);
          } else if (pole.type === "Power Pole") {
            setsolePowers([...solePowers,newPole]);
          } else if (pole.type === "Central Office") {
            setCOs([...COs,newPole]);
          } else if (pole.type === "Customer") {
            setcustomers([...customers,newPole]);
          } else if (pole.type === "Joint Pole") {
            setjointPoles([...jointPoles,newPole]);
          }
        });
        soleTeleLayer._finalize();
      })
      .catch((err) => console.log(err));
  },[]);

  const layers = [
    demoLayer,soleTeleLayer,// solePowerLayer,// jointLayer,// centralOfficeLayer,// customerLayer,];