来自子组件的 PouchDB 数据

Question

我怀疑这也可能是一个正常的 React 问题，但是我正在构建一个 react-native 应用程序，并且对所有这一切都很陌生，所以希望我只是没有掌握一个概念。

在我的 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 的渲染函数中，我包含了 3 个组件，它们都将使用 localDB 数据。我假设 PouchDB 的数据是应用程序范围的，但似乎 this.localDB 只能在 Home.js 中访问（由于 'this'，这在我输入时很有意义）。

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

Answer 1

如果您需要从不同的组件访问您的 localDB，我建议将所有与数据库相关的东西（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 (
...

来自子组件的 PouchDB 数据

PouchDB data from a child component

pouchdb

reactjs

react-native