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

我正在使用react with firestore从firebase获取数据，并使用引导表显示数据，但问题是数据已经被推送到列表中，但如果我试图通过引导表显示，它将不会呈现。我已经在我的数据上设置了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;

import React，{useffect，useState}来自“React”；
从“./firebase/fireConfig”导入{db}；
从“react bootstrap table next”导入引导可选项；
从“react-bootstrap-table2-paginator”导入分页工厂；
从“react bootstrap”导入*作为react bootstrap；
函数表（）{
const[speedData，setSpeedData]=useState（[]）；
useffect（（）=>{
db.收集（“车辆”）
.doc（“速度传感器”）
.收集（“速度”）
.orderBy（“时间戳”、“asc”）
.get（）
。然后（（快照）=>{
常数速度_值=[]；
snapshot.forEach（（doc）=>{
const data=doc.data（）；
速度值推送（数据）；
log（`SpeedData:=>>${data.speed}`）；
});
设置速度数据（{speedData:speed_value}）；
})
.catch（（错误）=>console.log（错误））；
}, []);
控制台日志（speedData）；
常数列=[
{数据字段：“时间戳”，文本：“时间戳”}，
{数据字段：“速度”，文本：“速度”}，
];
返回(
);
}
导出默认表；

在这里使用的react钩子中，只需调用state方法，这里是

setSpeedData

，这里是

speed\u value

传入值，它将自动设置状态

speedData

，因为

setSpeedData

方法已被指定为设置“speedData”的状态

---

因此，尝试

setSpeedData（speed\u value）

而不是

setSpeedData（{speedData:speed\u value}）

我修改了上面的代码，它工作得很好

import React，{useffect，useState}来自“React”；
从“./firebase/fireConfig”导入{db}；
从“react bootstrap table next”导入引导可选项；
从“react-bootstrap-table2-paginator”导入分页工厂；
从“react-bootstrap-table2-toolkit”导入ToolkitProvider，{Search}；
从“react bootstrap”导入*作为react bootstrap；
从“fusioncharts/fusioncharts.charts”导入图表；
从“react fusioncharts”导入react fusioncharts；
从“fusioncharts/fusioncharts.Widgets”导入小部件；
从“fusioncharts/themes/fusioncharts.theme.fusion”导入FusionTheme；
从“react fusioncharts”导入ReactFC；
从“FusionCharts”导入FusionCharts；
导入“/SpeedLog.css”；
函数SpeedLog（）{
//定义图表道具
fcRoot（FusionCharts、Widgets、fusionteme）；
//解决图表的依赖性
图表（FusionCharts）；
const[loading，setLoading]=useState（false）；
const[speedData，setSpeedData]=useState（[]）；
让最后一项；
设lastSpeed=0；
useffect（（）=>{
数据库收集（“数据”）
.doc（“MP10ME7969”）
.收集（“速度”）
.orderBy（“id”、“asc”）
.onSnapshot（（文档）=>{
常数速度_值=[]；
docs.forEach（（doc）=>{
speed_value.push（doc.data（））；
});
设置速度数据（速度值）；
设置加载（真）；
});
}, []);
lastItem=speedData[speedData.length-1]；
如果（lastItem！==未定义）{
const obj=Object.entries（lastItem）；
对象forEach（（[key，value]）=>{
如果（键=“速度”）{
最后速度=数值；
}
});
}
lastItem=speedData[speedData.length-1]；
如果（lastItem！==未定义）{
const obj=Object.entries（lastItem）；
对象forEach（（[key，value]）=>{
如果（键=“速度”）{
最后速度=数值；
}
});
}
//配置小部件
常量数据源={
图表：{
标题填充：“0”，
origw:“320”，
奥瑞：“300”，
高吉欧·泰拉迪乌斯：“115”，
高仪三角：“270”，
高更悬挂：“-25”，
showvalue:“1”，
valuefontsize:“30”，
少校编号：“13”，
重大问题：“2”，
主八：“13”，
小矮人：“7”，
MinortHickness:“1”，
最小编号：“1”，
showgaugeborder:“0”，
主题：“融合”，
},
颜色范围：{
颜色：[
{
最小值：“0”，
最大值：“85”，
代码：#999999“，
},
{
minvalue:“85”，
最大值：“180”，
代码：“F6F6F6”，
},
],
},
拨号盘：{
拨号：[
{
值：lastSpeed，
bgcolor:#F20F2F“，
底宽：“8”，
},
],
},
注释：{
小组：[
{
项目：[
{
键入：“文本”，
id:“文本”，
文本：“kmph”，
x:“$gaugeCenterX”，
y:$GaugeCentry+40，
字体大小：“20”，
颜色：#555555“，
},
],
},
],
},
};
常量列=[
{
文字：“速度”，
数据域：“速度”，
},
{
文本：“时间戳”，
数据字段：“时间戳”，
},
];
常量默认排序=[
{
数据字段：“id”，
命令：“asc”，
},
];
返回(
{加载(
{（道具）=>(

)}
) : (
)}
);
}
导出默认速度日志；

您可以在问题中包含代码而不是它的图像吗？您还可以将

speedData

设置为数组对象，然后尝试将BootstrapTable中的数据设置为完整的