NeDBから読み込んだ値を画面に一覧表示したいのですが

Question

Nextronで画面読み込み時に
NedbのDBファイルから取得したデータを
material-tableを使用して一覧表示したいのですが表示が出来ません。

###作成したファイル

import React, { useState } from 'react';
import datastore from 'nedb';
import MaterialTable from 'material-table';

export default function EnhancedTable() {
  const [data, setData] = useState([
    { to: 'Mehmet', subject: 'Baran'},
    { to: 'Zerya Betül', subject: 'Baran'},
  ]);

  var db = new datastore({
    filename: 'C:\Users\ore\Desktop\electron\MY_APP\nedb.db',
    autoload: true
  });

  db.find({}, function(err, docs){
    let loadData = [];
    docs.map(doc => loadData.push({ to:doc.to, subject:doc.subject }));
    setData({...loadData});  //←これで表示が更新されるつもりだったが更新されない
  });



  return (
    <div style={{ height: 400, width: '100%' }}>
    <MaterialTable
      title="Basic Selection Preview"
      columns={[
        { title: 'to', field: 'to' },
        { title: 'subject', field: 'subject' },
      ]}
      data={data}
      options={{
        selection: true
      }}
    />
    </div>
  )
}

Answer 1

おそらく
ツッコミどころの多い質問をしてしまいましたが
ひとまず下記のソースで自己解決いたしました。

import React, { useState } from "react";
import datastore from "nedb-promises";
import MaterialTable from "material-table";

const db = datastore.create("nedb.db");

export default function EnhancedTable() {
  const [data, setData] = useState([]);

  async function setRow() {
    await db.find({}).then((result) => {
      let readRows = [];
      result.map((row) => {
        readRows.push({ to: row.to, subject: row.subject });
      });
      setData(readRows);
    });
  }

  setRow();

  return (
    <div style={{ height: 400, width: "100%" }}>
      <MaterialTable
        title="Basic Selection Preview"
        columns={[
          { title: "to", field: "to" },
          { title: "subject", field: "subject" }
        ]}
        data={data}
        options={{
          selection: true
        }}
      />
    </div>
  );
}