Javascript React-get数组从MongoDB缝合到React引导表中

我有一个简单的React应用程序连接到MongoDB Stitch（Atlas）并正在运行，并且能够匿名获取一些虚拟数据。我可以将数据数组显示为文本：

const {
    Stitch,
    RemoteMongoClient,
    AnonymousCredential
} = require('mongodb-stitch-browser-sdk');

const client = Stitch.initializeDefaultAppClient('XXX-YYY');

const db = client.getServiceClient(RemoteMongoClient.factory, 'mongodb-atlas').db('vendor');

client.auth.loginWithCredential(new AnonymousCredential()).then(() =>
  db.collection('vendor-item').find().asArray()
).then(docs => {
    console.log("Found docs", docs);
    const html = docs.map(docs => `
    <div>${docs._id}</div>
    <div>${docs.owner_id}</div>
    <div>${docs.number}</div>`);
    document.getElementById("comments").innerHTML = html;
}).catch(err => {
    console.error(err)
});

但是，我试图从数据库中提取该数据，并将其显示在下一个

react bootstrap表中

表中，该表是现成的，但也有不同的虚拟数据：

// dummy data
const data = [
    { id: 1, name: "Company 1", url: "http://www.google.com", loc:"san francisco, ca" },
    { id: 2, name: "Company 2", url: "http://www.bing.com", loc:"oakland, ca"  }
  ];
  const columns = [{
    dataField: 'name',
    text: 'Company'
  }, {
    dataField: 'url',
    text: 'URL'
  }, {
    dataField: 'loc',
    text: 'Location'
  }];

然而，我特别需要将这两种方法结合起来，并需要BootstrapTable所期望的格式的MongoDB数组，具体为

data={data}

和

columns={columns}

，如下所示：

<BootstrapTable
  keyField="id"
  data={data}
  columns={columns}
  striped
  hover
  condensed
  bootstrap4
/>

---

我已经在网上搜索了使用“mongodb stitch”和“react”的教程，并尝试了我能想到的一切，但没有成功。

我一点也不知道react，但在我看来，这与Mongo stitch并没有什么关系。你能从Stitch中提取数据，用JS将其重新格式化为BootstrapTable所期望的格式，然后将该对象/数组馈送到BootstrapTable中吗？我一点也不知道React，但在我看来，这与Mongo Stitch并不相关。你能从Stitch中提取数据，用JS将其重新格式化为BootstrapTable所期望的格式，然后将该对象/数组馈送到BootstrapTable中吗？

<BootstrapTable
  keyField="id"
  data={data}
  columns={columns}
  striped
  hover
  condensed
  bootstrap4
/>