【发布时间】：2021-08-18 15:19:56
【问题描述】：
大家好
今天我来到这个美丽的平台，遇到了一个非常糟糕的问题。 我有一个使用传单地图的应用程序，在这些地图上我显示了来自 firebase 的实时标记。 但现在我做了一些额外的功能，但现在标记不再显示我查看了所有堆栈溢出但我无法与我的问题进行比较。我的问题是不会再出现，我不知道为什么会发生这种情况
这是显示标记的旧代码
import React,{useState, useEffect} from 'react';
import './LiveRouteTile.scss';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import markerIconPng from "leaflet/dist/images/marker-icon.png"
import {Icon} from 'leaflet'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import firebase from "../../../firebase"
import {createApiEndpoint, Endpoints} from '../../../api/index';
import axios from "axios";
const LiveRouteTile = ({type}) => {
const [RuuviTag, setRuuviTag] = useState([]);
const [loading, setLoading] = useState(false);
let [responseData, setResponseData] = React.useState('')
const ref = firebase.firestore().collection("RuuviTag");
function getData(){
setLoading(true);
ref.onSnapshot((querySnapshot) => {
const items = [];
querySnapshot.forEach((doc)=>{
items.push(doc.data());
console.log(items);
});
setRuuviTag(items);
setLoading(false);
});
}
useEffect(()=> {
getData();
}
, []);
return (
<div className="route-tile">
<Card className="route-card" >
<CardContent className="route-card-content">
{loading ? <h1>Loading...</h1> : (<MapContainer className="map" center={[52.09, 5.10]} zoom ={8}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{RuuviTag.map((tag) => (
<div key={tag.MAC}>
<Marker position={[tag.Latitude.replace(/,/g, '.') , tag.Longitude.replace(/,/g, '.') ]} icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})} >
<Popup>
<h1>{tag.MAC}</h1>
</Popup>
</Marker>
</div>
))}</MapContainer>)}
</CardContent>
</Card>
</div>
)
}
export default LiveRouteTile
在接下来您将看到的代码中，我用解密的数据和一个用于检查边界的字符串扩展了数组，我认为这可能与我现在使用一些函数同步但我找不到它有关。 我没有收到错误，唯一的问题是当标记位于 Ruuvitag.map() 函数内时它不会显示，但是当我将它从 .map() 函数中取出时，它会显示静态值。但即使在 .map() 中仅使用标记的硬编码属性，它仍然不会显示
破解密码：
import React, { useState, useEffect } from 'react';
import './LiveRouteTile.scss';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import markerIconPng from "leaflet/dist/images/marker-icon.png"
import { Icon } from 'leaflet'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import firebase from "../../../firebase"
import { createApiEndpoint, Endpoints } from '../../../api/index';
import axios from "axios";
import { ControlPointDuplicateOutlined } from '@material-ui/icons';
const LiveRouteTile = ({ type }) => {
const [RuuviTag, setRuuviTag] = useState([]);
const [loading, setLoading] = useState(false);
async function PostRawData(rData) {
return axios.post("apilink", { rawData: rData }) //i changed the api link for pricacy reasons
}
async function checkBoundaries(rdata) {
try {
const response = await PostRawData(rdata)
console.log(response)
const data = response.data
if (22.00 > data.temperature && data.temperature > 4.00) {
console.log('if')
return { data: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png' }
}
else {
console.log('else')
return { data: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png' }
}
} catch (err) {
console.error(err)
}
}
const ref = firebase.firestore().collection("RuuviTag");
function getData() {
setLoading(true);
ref.onSnapshot((querySnapshot) => {
const items = [];
console.log(querySnapshot)
querySnapshot.forEach((doc) => {
let item = doc.data()
Promise.all([
PostRawData(doc.data().RawData),
checkBoundaries(doc.data().RawData),
]).then(function (result) {
item.decryptedData = result[0].data;
item.colorIcon = result[1].data;
console.log(item);
items.push(item);
})
});
setRuuviTag(items);
console.log(items)
console.log('hi')
console.log(RuuviTag);
setLoading(false);
});
}
console.log(RuuviTag)//this is the log from the picture below
useEffect(() => {
getData();
}
, []);
return (
<div className="route-tile">
<Card className="route-card" >
<CardContent className="route-card-content">
{loading ? <h1>Loading...</h1> : (<MapContainer className="map" center={[52.09, 5.10]} zoom ={8}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[9.0,9.0]} icon={new Icon({iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png', iconSize: [25, 41], iconAnchor: [12, 41]})} >
<Popup>
<h1>jaap</h1>
</Popup>
</Marker>
{RuuviTag.map((tag) => (
<div key={tag.MAC}>
{console.log(tag)}
<Marker position={[tag.Latitude.replace(/,/g, '.') , tag.Longitude.replace(/,/g, '.') ]} icon={new Icon({iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png', iconSize: [25, 41], iconAnchor: [12, 41]})} >
<Popup>
<h1>{tag.MAC}</h1>
</Popup>
</Marker>
</div>
))}</MapContainer>)}
</CardContent>
</Card>
</div>
)
}
export default LiveRouteTile
任何人都知道我做错了什么/或知道解决此问题的另一种方法。 先感谢您。 这是我的第一篇文章顺便说一句，如果我问了一个好问题以及可以改进的地方，请提供反馈。 祝你有美好的一天（：
【问题讨论】：
标签： javascript arrays firebase async-await leaflet