javascript - 在 map() 函数中标记不会加载

Question

我在传单中的标记不会加载到 map 函数中，但它以前做过，我不知道怎么做，因为当我将标记放在 map 函数之外的损坏代码中时，它会显示，但是当它像在 map 函数内部工作时一样标记不会加载。我到处查看堆栈溢出和谷歌，但没有找到重复的答案。这很有帮助，我认为这是一个小错误，但是当我比较 2 时，我无法弄清楚它是什么。

损坏的代码：

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) {
    console.log('test')

    return axios.post("api", { rawData: rData })

  }

  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 = [];

      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);
    });
  }

  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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <Marker position={[37.7858, -122.401 ]} icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})} >
                    <Popup>
                   
                    </Popup>
                    </Marker>
                    {RuuviTag.map((tag) => (
                      <div key={tag.MAC}>

        {console.log(tag.decryptedData.humidity)
        }
                      <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

这是之前工作的代码，但我不知道我改变了什么，为什么标记不会出现

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('')
    

    function PostRawData(rData){
      axios.post("https://localhost:44332/Convert/", {rawData :rData})
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
 
    const ref = firebase.firestore().collection("RuuviTag");
   function getData(){
      setLoading(true);
      ref.onSnapshot((querySnapshot) => {
        const items = [];
        querySnapshot.forEach((doc)=>{items.push(doc.data());
      });
  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='&copy; <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 控制台日志：

标签： javascriptreactjsfirebaseasync-awaitleaflet

Answer 1

 ref.onSnapshot((querySnapshot) => {
        const items = [];
        querySnapshot.forEach((doc)=>{items.push(doc.data());
       // lifetime of the variable items end here at this block. 
      });
  // items will not be reachable here . it will be undefined. 
  setRuuviTag(items);

getData在您的函数中更改您的代码如下

const items = [];
ref.onSnapshot((querySnapshot) => {
        querySnapshot.forEach((doc)=>{items.push(doc.data());
      });
setRuuviTag(items);