来自 firestore 的实时数据在 React 中使用 api

如何解决来自 firestore 的实时数据在 React 中使用 api

使用 Reactjs

大家好。

过去几天，我一直在尝试获取实时数据，当 Firestore 中的某些内容发生变化时，它会设置一个函数，但它运行的时间比我实际想要的要多得多，因为数据每 15 秒左右才会更改一次但是我一直在检索会使我的应用程序崩溃的东西，因为我需要使用 axios 在 Api 调用中使用数据，然后在地图中显示数据，但我为此使用了 .map 函数，但我发现那是一个同步函数但我认为它需要异步才能正常工作。

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('')
  let [mapIcon,setMapIcon] = useState('https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png')


  function PostRawData(rData) {
    console.log('test')
    axios.post("https://localhost:44332/Convert/",{ rawData: rData })
      .then(function (response) {

        console.log(response.data.temperature);
        setResponseData(response.data);
      })
      .catch(function (error) {

        console.log(error);
      });
  }

  function checkBoundaries(Mac) {

    const bref = firebase.firestore().collection("RuuviTag").doc(String(Mac));
    console.log(Mac)

    let itemss = []

    bref.onSnapshot(docSnapshot => {

      itemss.push(docSnapshot.data())
      console.log(`Received doc snapshot: ${docSnapshot.data().RawData}`);
      PostRawData(docSnapshot.data().RawData);
      console.log(responseData)
      if (22.00 > responseData.temperature && responseData.temperature > 4.00) {
        console.log('if')
        setMapIcon('https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png')
      }
      else {
        console.log('else')
        setMapIcon('https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png')
      }
      // ...
    })
  }

  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}>
                  {console.log(tag.MAC),checkBoundaries(tag.MAC)
                  }

                  <Marker position={[tag.Latitude.replace(/,/g,'.'),tag.Longitude.replace(/,'.')]} icon={new Icon({ iconUrl: mapIcon,iconSize: [25,41],iconAnchor: [12,41] })} >
                    <Popup>
                      <h1>{tag.MAC}</h1>
                    </Popup>
                  </Marker>





                </div>
              ))}</MapContainer>)}
          </CardContent>
        </Card>


      </div>
    )

  }

export default LiveRouteTile

但我认为最大的问题是我的 firestore get data 函数运行太频繁，但我认为还有很多其他问题。我来这里只是因为我找不到任何其他方式。

这是我从 API 返回的响应主体，当您向它提供我从 Firebase 获得的原始字符串时

Response body
{
  "humidity": 25.5,"temperature": 22.96,"pressure": 1011.96,"batteryVoltage": 2917,"acceleration": {
    "xAxis": -0.19,"yAxis": -0.572,"zAxis": -0.769
  }
}

当我现在尝试使用它时，我每秒收到 100 条控制台日志。非常感谢您阅读我的问题，希望您能帮助我。

解决方法

不太清楚您想说什么或导致您的应用程序崩溃的原因，但仍然异步发送发布请求：

取而代之的是：

function PostRawData(rData) {
    console.log('test')
    axios.post("https://localhost:44332/Convert/",{ rawData: rData })
      .then(function (response) {

        console.log(response.data.temperature);
        setResponseData(response.data);
      })
      .catch(function (error) {

        console.log(error);
      });
  }

这样做：

async function PostRawData(rData) {
    try {
        console.log('test')
        const response = await axios.post("https://localhost:44332/Convert/",{ rawData: rData })          
        console.log(response.data.temperature);
        setResponseData(response.data);                      
    } catch (error) {
        console.log(error);
    }
}

,

在应用 map 方法之前，请确保您的 RuuviTag 数组已填充数据。 我不确定这是否会修复您的代码，但您可以尝试添加：

{ RuuviTag.length != 0 && RuuviTag.map((tag) => (
  ...