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

Question

使用 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(/,/g, '.')]} 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 获取数据功能运行过于频繁，但我认为还有很多其他问题。我只是来这里是因为我找不到其他方法。

这是我从 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 条控制台日志。非常感谢您阅读我的问题，希望您能帮助我。

Answer 1

不是很清楚你想说什么或者是什么导致你的应用崩溃，但仍然使发布请求异步：

而不是这个：

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

Answer 2

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

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