如何呈现 table 从 firestore 获取的数据？

Question

我正在使用与 firestore 的反应从 firebase 获取数据并使用 Bootstrap Table 显示数据但是问题是数据已经被推入列表但是如果我试图显示通过 bootstrap table 它不会呈现。我已经 console.log() 在我的数据上它将打印但不显示。

有人知道这是什么问题吗？

输出图片

这是我的代码以及浏览器，打印了 table 并且 console.log() 从 firebase 获取数据并存储在列表中。我正在尝试查看列表，但它有效数据在列表中

import React, { useEffect, useState } from "react";
import { db } from "../firebase/fireConfig";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import * as ReactBootstrap from "react-bootstrap";

function Table() {
  const [speedData, setSpeedData] = useState([]);

  useEffect(() => {
    db.collection("vehicle")
      .doc("speed_sensor")
      .collection("speed")
      .orderBy("timestamp", "asc")
      .get()
      .then((snapshot) => {
        const speed_value = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          speed_value.push(data);
          console.log(`SpeedData :=>> ${data.speed}`);
        });
        setSpeedData({ speedData: speed_value });
      })
      .catch((error) => console.log(error));
  }, []);

  console.log(speedData);
  const colums = [
    { dataField: "timestamp", text: "Timestamp" },
    { dataField: "speed", text: "Speed" },
  ];

  return (
    <div>
      <BootstrapTable
        keyField="timestamp"
        data={speedData}
        columns={colums}
        pagination={paginationFactory()}
      />
    </div>
  );
}

export default Table;

Answer 1

在你这里使用的react hooks中，你只需要调用状态方法，这里是setSpeedData，传入值，这里是speed_value，它会自动设置状态 speedData 因为 setSpeedData 方法已经分配给 'speedData'

设置状态

所以，尝试 setSpeedData(speed_value) 而不是 setSpeedData({ speedData: speed_value })

Answer 2

我修改了上面的代码，完美运行。

import React, { useEffect, useState } from "react";
import { db } from "../firebase/fireConfig";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit";
import * as ReactBootstrap from "react-bootstrap";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFusioncharts from "react-fusioncharts";
import Widgets from "fusioncharts/fusioncharts.widgets";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import ReactFC from "react-fusioncharts";
import FusionCharts from "fusioncharts";
import "./SpeedLog.css";

function SpeedLog() {
  // define chart props
  ReactFC.fcRoot(FusionCharts, Widgets, FusionTheme);

  // Resolves charts dependancy
  charts(FusionCharts);

  const [loading, setLoading] = useState(false);
  const [speedData, setSpeedData] = useState([]);

  let lastItem;
  let lastSpeed = 0;

  useEffect(() => {
    db.collection("data")
      .doc("MP10ME7969")
      .collection("speed")
      .orderBy("id", "asc")
      .onSnapshot((docs) => {
        const speed_value = [];
        docs.forEach((doc) => {
          speed_value.push(doc.data());
        });
        setSpeedData(speed_value);
        setLoading(true);
      });
  }, []);

  lastItem = speedData[speedData.length - 1];
  if (lastItem !== undefined) {
    const obj = Object.entries(lastItem);
    obj.forEach(([key, value]) => {
      if (key === "speed") {
        lastSpeed = value;
      }
    });
  }

  lastItem = speedData[speedData.length - 1];
  if (lastItem !== undefined) {
    const obj = Object.entries(lastItem);
    obj.forEach(([key, value]) => {
      if (key === "speed") {
        lastSpeed = value;
      }
    });
  }

  // config widget
  const dataSource = {
    chart: {
      captionpadding: "0",
      origw: "320",
      origh: "300",
      gaugeouterradius: "115",
      gaugestartangle: "270",
      gaugeendangle: "-25",
      showvalue: "1",
      valuefontsize: "30",
      majortmnumber: "13",
      majortmthickness: "2",
      majortmheight: "13",
      minortmheight: "7",
      minortmthickness: "1",
      minortmnumber: "1",
      showgaugeborder: "0",
      theme: "fusion",
    },
    colorrange: {
      color: [
        {
          minvalue: "0",
          maxvalue: "85",
          code: "#999999",
        },
        {
          minvalue: "85",
          maxvalue: "180",
          code: "#F6F6F6",
        },
      ],
    },
    dials: {
      dial: [
        {
          value: lastSpeed,
          bgcolor: "#F20F2F",
          basewidth: "8",
        },
      ],
    },
    annotations: {
      groups: [
        {
          items: [
            {
              type: "text",
              id: "text",
              text: "kmph",
              x: "$gaugeCenterX",
              y: "$gaugeCenterY + 40",
              fontsize: "20",
              color: "#555555",
            },
          ],
        },
      ],
    },
  };

  const columns = [
    {
      text: "SPEED",
      dataField: "speed",
    },
    {
      text: "TIMESTAMP",
      dataField: "timestamp",
    },
  ];

  const defaultSorted = [
    {
      dataField: "id",
      order: "asc",
    },
  ];

  

  return (
    <div className="speedlog">
      <div className="speedlog_widget">
        <ReactFusioncharts
          type="angulargauge"
          width="50%"
          height="50%"
          dataFormat="JSON"
          dataSource={dataSource}
        />
      </div>
      <div className="speedlog_table">
        {loading ? (
          <ToolkitProvider
            bootstrap4
            keyField="id"
            data={speedData}
            columns={columns}
            search
          >
            {(props) => (
              <div>
                <hr />
                <BootstrapTable
                  defaultSorted={defaultSorted}
                  pagination={paginationFactory()}
                  {...props.baseProps}
                />
              </div>
            )}
          </ToolkitProvider>
        ) : (
          <ReactBootstrap.Spinner animation="border" />
        )}
      </div>
    </div>
  );
}

export default SpeedLog;

如何呈现 table 从 firestore 获取的数据？

How to render the data in table fetches from firestore?

javascript

reactjs

firebase

google-cloud-firestore

bootstrap-table