Реагировать получить массив из MongoDB Stitch в реагировать- bootstrap -table-next - PullRequest
Новая
       6

Реагировать получить массив из MongoDB Stitch в реагировать- bootstrap -table-next

1 голос
/ 08 февраля 2020

У меня есть простое приложение 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)
});

И это отображается как HTML как: 

5e3dd30510807794cdef7968
5e3dac4310807794cde483f9
42
,
5e3dd30510807794cdef7978
5e3dd223340f9a51200f9192
42
,
5e3dd504ba978a97da4dc058
5e3dd503ba978a97da4dc020
42

Однако я пытаюсь извлечь эти данные из базы данных и отобразить его в таблице react-bootstrap-table-next, которую я работаю «из коробки», но также с различными фиктивными данными: 

// 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'
  }];

В то время как мне конкретно нужно объединить два метода и нужен массив MongoDB в формате, который ожидает BootstrapTable, а именно: data={data} и columns={columns} следующим образом: 

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

Я уже искал в Интернете учебники, используя "mongodb-stitch" и "реакции "и попробовал все, что мог придумать, без удачи.

...