如何呈现从 Firestore 获取的表中的数据？

Question

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

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

输出图像

这是我的代码以及打印表格的浏览器，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

我修改了上面的代码，效果很好。

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;

Answer 2

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

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