React- bootstrap -table2 не показывает данные из Firebase - PullRequest
Новая
       64

React- bootstrap -table2 не показывает данные из Firebase

0 голосов
/ 05 августа 2020

Я пытался получить данные из базы данных Firebase Realtime и отобразить их в таблице response- bootstrap -table2, но у меня возникли некоторые проблемы, когда дело доходит до фактического отображения данных. Когда я запускаю код, в таблице не печатается никакое значение, однако в консоли нет ошибки. Если я устанавливаю количество отображаемых значений в таблице равным 25, возникает ошибка: Uncaught TypeError: Невозможно прочитать метку времени свойства 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, вот так выглядит ошибка

Кто-нибудь знает, почему моя версия не работает? Любая помощь будет оценена!

1 Ответ

0 голосов
/ 05 августа 2020

Поскольку вы используете функциональный компонент, используйте крючки для установки состояния, это приведет к повторному рендерингу вашего компонента после установки вашего состояния: 

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;
...