删除折线第一个和最后一个节点之间的连接

Question

在我的 React 程序中，我从本地 JSON 文件读取并将坐标插入到数组中，以便它显示为折线：

let path = [];

let getData = (network) => {
    let elements = network[0].elements;
    let members = elements[0].members;
    for (let member of members) {
        if (member.type === "way" && member.role === "") {
            for (let geometry of member.geometry) {
                path.push([geometry.lat, geometry.lon]);
            }
            console.log(member);
        }
    }


    return {
        path: path,
    };
};

然后它通过

useHook

和

useEffect

传递到导出函数，最终被输入到

<Polyline>

。

export default function Map() {
    const [data, setData] = useState([{ path: [], markers: [], tags: [] }]);
    useEffect(() => {
        setData([getData(stoyobotsa)]);
    }, []);

    return (
        <MapContainer center={[0, 0]} zoom={5} scrollWheelZoom={true}>
            <TileLayer
                "attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors''
                url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
            />

            {data.map((x, index) => (
                <div key={index}>
                    <Polyline
                        positions={x.path}
                    />
                </div>
            ))}
        </MapContainer>
    );
}

由于某些特殊原因，数据的第一个和最后一个坐标连接在一起，尽管它们不是相同的坐标。我看了好几遍，好像没有什么错误。

例如，当我在 getData 函数末尾移动并保存代码时，它会删除该行以及底部的一点。当我删除 shift() 方法时，它会产生我想要的结果：

但是当我刷新本地主机时，它再次给我线路连接。这里发生了什么？