提供給“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}
    }));
  });
};