Reactjs 来自子组件的数据库数据

我怀疑这也可能是一个正常的React问题，不过我正在构建一个React原生应用程序，而且对所有这些都很陌生，所以希望我没有掌握一个概念

在my Home.js（我的主屏幕组件）中，我正在我的应用程序中执行replicate.from，它将数据从我的couchDB服务器拉入我的应用程序（单向同步）并创建索引。代码看起来像这样

this.remoteDB = new PouchDB("http://localhost:5984/cs-test");

this.localDB = new PouchDB("cs-test", { adapter: "asyncstorage" });
this.localDB.replicate
  .from(this.remoteDB, {
    live: true,
    retry: true
  })
  .then(function(localDb) {
    localDb
      .createIndex({
        index: {
          fields: ["type"],
          name: "type"
        }
      })
      .catch(function(err) {
        console.log(err);
      });
  });

然后，我（只是为了确保它工作正常）查询并使用索引将数据转储到控制台

this.localDB
  .find({
    selector: {
      type: { $eq: "sessions" }
    }
  })
  .then(
    function(result) {
      console.log("HOME result");
      console.log(result);
    }.bind(this)
  )
  .catch(function(error) {
    console.error(error);
  });

这很好用

我的问题是，在Home.js的render函数中，我包含了3个组件，它们都将使用localDB数据。我假设PockDB的数据是应用程序范围的，但似乎this.localDB只能在Home.js中访问（这在我键入它时是有意义的，因为“this”）

---

知道如何访问我的子组件中的PockDB数据吗？

如果您需要从不同的组件访问您的localDB，我建议将所有与DB相关的内容（getDoc、saveDoc、pullDocs等）移动到一个模块，然后在需要时导入它。像这样：

// pdb.js
import PouchDB from 'pouchdb-react-native';
const localDB = new PouchDB(localDBname, {adapter: 'asyncstorage'});
const PDB = {};
PDB.getDoc = (docID)=> {
  return new Promise((resolve, reject)=> {
    localDB.get(docID)
    .then((result)=> {return resolve(result)})
    .catch((err)=> {
      if (err.status === 404) {
        // console.log(' ???????????? getDoc not found: ', docID)
        return resolve(null)
      } else {
        // console.log('[!!!!======>!!!!!!] getDoc err: ', err)
        return reject(err)
      }
    })
  })
}

PDB.saveDoc = (doc)=> {
...do stuff
}

module.exports = PDB;

然后导入并在您需要的任何组件中使用它：

//mycomponent.js
import PDB from './pdb';
...
class MyComponent extends React.Component {

componentDidMount() {
PDB.getDoc(docID)
.then((doc)=> {
 this.setState({name: doc.name})
})
}

render() {
 return (
...

---

您可以使用

setState

在

Home

组件状态中设置

result

，然后将该状态作为道具传递给您的子组件。谢谢，我能够在测试应用程序中实现这一点。我很喜欢@alex green下面的想法，所以我也可以尝试一下，只是为了保持组件的清洁。谢谢你的指点。谢谢你的主意，我要试试这个。我真的很喜欢从我的主文件中删除所有数据库混乱的想法。我将在稍后发回（我希望有好消息）：）