React-bootstrap-table2 不显示来自 Firebase 的数据

Question

我一直在尝试从 Firebase 实时数据库中检索数据并将其显示在 react-bootstrap-table2 中，但是在实际显示数据时遇到了一些问题。 当我运行代码时，表中没有打印任何值，但是，控制台中没有错误。 如果我将表中显示的值的数量设置为 25，则会出现错误：Uncaught TypeError: Cannot read property 'timestamp' of undefined。 但是，如果我使用 console.log 时间戳，我首先会得到一个空数组，然后是一个带有时间戳值的数组（参见下面的屏幕截图）。

这是我的代码：

const App = () => {
  const timestamp = [];
  const getTimestamp = () => {
    const database = db.ref().child("timestamped_measures");
    database.on("value", (ts_measures) => {
      ts_measures.forEach((ts_measure) => {
        const array = {
          time: ts_measure.val().timestamp,
        };
        timestamp.push(array);
      });
    });
  };

  const columns = [{ dataField: "time", text: "Timestamp" }];
  useEffect(() => {
    getTimestamp();
  }, []);
  console.log(timestamp);
  return (
    <div className="App">
      <BootstrapTable
        keyField="timestamp"
        data={timestamp}
        columns={columns}
        pagination={paginationFactory()}
      />
    </div>
  );
};

export default App;

这就是我的 Firebase 数据库的样子

这就是我的页面和控制台的样子

当分页设置从 10 到 25 时，这就是错误的样子

有谁知道为什么我的版本不起作用？ 任何帮助，将不胜感激！

Answer 1

由于您使用的是功能组件，因此请使用挂钩来设置 state，这将在设置 state 后重新渲染您的组件：

const App = () => {
  // Make timestamp state
  const {timestampList, setTimestampList} = React.useState([]);      

  const timestamp = [];
  const getTimestamp = () => {
    const database = db.ref().child("timestamped_measures");
    database.on("value", (ts_measures) => {
      ts_measures.forEach((ts_measure) => {
        const array = {
          time: ts_measure.val().timestamp,
        };
        timestamp.push(array);
      });
        
        // Set array to timestamp state array
        setTimestampList(timestamp);

    });
  };

  const columns = [{ dataField: "time", text: "Timestamp" }];
  useEffect(() => {
    getTimestamp();
  }, []);
  console.log(timestamp);
  return (
    <div className="App">
      <BootstrapTable
        keyField="timestamp"
        data={timestampList} // Pass timestamp state to data prop
        columns={columns}
        pagination={paginationFactory()}
      />
    </div>
  );
};

export default App;