提供给“DataProvider”的类型为“number”的无效道具“data”，应为“array”。 React-bootstrap-table2, Firebase 实时数据库

Question

我一直在尝试从 Firebase 实时数据库中检索数据并将其显示在 react-bootstrap-table2 中，但是在实际显示数据时遇到了一些问题。 当我运行代码时，我收到一个错误： Failed prop type: Invalid prop data of type number provided to DataProvider , expected array 。

这是我的代码：

const App = () => {
  const [timestamp, setTimestamp] = useState([]);
  const [loading, setLoading] = useState(false);
  const getTimestamp = () => {
    const database = db.ref("timestamped_measures");
    database.on("value", (ts_measures) => {
      ts_measures.forEach((ts_measure) => {
        setTimestamp(ts_measure.val().timestamp);
      });
    });
  };

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

export default App;

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

任何帮助，将不胜感激！

编辑： console.log(timestamp) console.log(typeof timestamp)

Answer 1

您需要将 ts_measures 中的时间戳结果 map 放入一个数组中，并将其存储在 state 中。 我假设，由于您的列包含一个数据字段“时间戳”，因此您的每个数据行都需要这个键来保存时间戳列的数据。

{timestamp: ts_measure.val().timestamp} 

试一试

const getTimestamp = () => {
  const database = db.ref("timestamped_measures");
  database.on("value", (ts_measures) => {
   setTimestamp(ts_measures.map((ts_measure) => {
      return {timestamp: ts_measure.val().timestamp}
    }));
  });
};