React-Leaflet：每秒更新标记的位置，从 .env 文件中获取坐标

Question

我正在 Arduino 板上运行的小型 http 服务器上运行一个简单的 React-lefeat 地图，我想根据 Arduino 从连接的 GPS 板提取的坐标来更新标记的位置（我的位置）。

整个事情应该是这样的：

1. Arduino 从 GPS 获取坐标并将纬度和经度写入 .env 文件中；
2. React-Leaflet 应用程序应每 1 或 2 秒更新一次标记的位置 我使用 .env 文件，因为当我运行构建命令（npm run build）时，.env 文件保留在最小化的 .js 文件之外，因此可以从 Arduino 端轻松访问（并且可写）（应用程序保留在 SD 上）卡片）。 我确实使用了 setInterval 方法，但只运行了六次（即获取的输出）。有人知道如何仅更新呈现标记的组件吗？假设每 1 或 2 秒更新一次？ 该组件的代码是这样的：

import React, { useState, useEffect } from "react";
import textfile from "./data.env";
import { Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from 'leaflet';

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

//import ReadTxt from "./ReadTxt";
//import LetturaTxt from "./LetturaTxt";

let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

function Interval() {
    const [text, setText] = useState(0);

    useEffect(() => {
        //Implementing the setInterval method
        const interval = setInterval(() => {
            fetch(textfile)
                .then((response) => response.text())
                .then((textContent) => {
                    setText(textContent);
                }, []);
        }, 1000);
        //Clearing the interval
        return () => clearInterval(interval);
    }, []);


    //var result = parseFloat(text);
    //console.log(text)
    if (text > 0) {
        console.log(text)
        return (
            <Marker position={[parseFloat(text), +11.000]}>
                <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                </Popup>
            </Marker>
        )
    }

};

export default Interval;

App的主要代码是这样的：

//import React from "react";
import React, { useRef } from "react";
import { MapContainer, TileLayer, GeoJSON } from "react-leaflet";
import "leaflet/dist/leaflet.css";
//import Marcatore from "./Marcatore";
import { HashRouter } from "react-router-dom";
//import LetturaTxt from "./LetturaTxt";
import CTR from "./Provincie.json";
//import Interval2 from "./Interval2";
//import ImportJS from "./ImportJS";
import Interval from "./Interval";


function App() {
  const latitude = 43.000;
  const longitude = 11.000;
  const mapRef = useRef(null);

  return (
    <HashRouter>
      <MapContainer center={[latitude, longitude]} zoom={13} ref={mapRef} style={{ height: "99vh", width: "vw" }}>
        <div>
          <Interval />
        </div>
        <GeoJSON data={CTR} />
      </MapContainer>
    </HashRouter >
  );
}

export default App;

提前非常感谢！ 塞巴斯蒂安

Answer 1

我终于找到了解决方案，这是该组件的代码：

import React, { useEffect } from "react";
//import textfile from "./data.env";
import { Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from 'leaflet';
//import { Icon } from 'leaflet';
//import icon from 'leaflet/dist/images/icons8-location-off-40.png';
//import iconShadow from 'leaflet/dist/images/marker-shadow.png';
import Fetch from "./Fetch";

//import ReadTxt from "./ReadTxt";
//import LetturaTxt from "./LetturaTxt";

function GetIcon() {
    return L.icon({
        iconUrl: require("leaflet/dist/images/icons8-location-off-40.png"),
        iconSize: [36,36],
        iconAnchor : [18,18],
    });
}

/*let DefaultIcon = L.icon({
    iconUrl: icon,
    //shadowUrl: iconShadow
});*/

//L.Marker.prototype.options.icon = DefaultIcon;

function Interval() {
    const [text, setText] = React.useState(0);
    var result = Fetch();
    useEffect(() => {
        //Implementing the setInterval method
        const interval = setInterval(() => {
            setText(result);
        }, 1000);
        //Clearing the interval
        return () => clearInterval(interval);
    },);


    var latcheck = parseFloat(text);
    //console.log(text)
    if (latcheck > 0) {
        //var posizione = text;
        //console.log(text);
        return (
            <Marker position={text} icon={GetIcon()}>
                <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                </Popup>
            </Marker>
        )
    }

};

export default Interval;

解决方案特别体现在这部分代码中：

function Interval() {
    const [text, setText] = React.useState(0);
    var result = Fetch();
    useEffect(() => {
        //Implementing the setInterval method
        const interval = setInterval(() => {
            setText(result);
        }, 1000);
        //Clearing the interval
        return () => clearInterval(interval);
    },);