Pouchdb db`allDocs`迭代未将Reactjs中的值返回到另一个文件

Question

我有PouchDb作为本地存储，还有一个我从中调用DB函数的Reactjs文件。

代码是这样的

视图>>>>>>>>>

import React from 'react';
import person  from '../localstore/test'
var person1 = new person();
var settext=[];
settext.push("The amazing devops");  

function Bigtag() {
  var gottext=person1.gettingthetag();
  settext.push(gottext);
  console.log("The object pushed is : "+gottext); // or i have used settext[1].
  return (
  <h1>{settext}</h1>
  );
}

export default Bigtag;

DB控制器就是这样。

import PouchDB from 'pouchdb';
const db = new PouchDB('bigTag');
var biggertext = ["Default"];

function getbigtag() {
  this.gettingthetag = function() {
    db.allDocs({
      include_docs: true,
      descending: true,
      limit: 1
    }, (err, doc) => {
      doc.rows.forEach(e => {
        var exploded = JSON.stringify(e.doc)
        var parsec = JSON.parse(exploded)
        biggertext.push(parsec.bigtext);
        console.log("The upper function has pushed the data in array : " + parsec.bigtext)
        console.log("The upper function has pushed the data in array at 1 : " + biggertext[1]) // value is pushed and can be fetched here 
        return biggertext; //or return biggertext[1]/// I CANNOT ACCESS THIS VALUE IN THE BIGTAG FILE..                 
      });
    }).catch((err) => {
      //console.error(err);
    });
  }
}

export default getbigtag;

因此return函数不会将值从我从中调用函数的位置返回到Bigtag文件。我得到推送的对象是：未定义。我知道它是一个异步函数，但它应该正确填充数组。我也无法在外部调用该数组。

Answer 1

对于回调样式，参数err是您在承诺catch中所期望的。

如果可能，

不要使用难以管理的回调样式。请使用异步功能或Promises。
另一个问题是biggertext中forEach的返回语句：
doc.rows.forEach(e => {
  var exploded =  JSON.stringify(e.doc)
  var parsec = JSON.parse(exploded)
  biggertext.push (parsec.bigtext);
  // exactly where is this return value landing?
  return biggertext; 
});
如所评论，究竟是什么在收到该返回值？ 
（提示：什么都没有。）

下面是一个代码片段，以某种编码方式展示了异步，承诺和回调样式。例如，Promise样式函数：
  this.gettingthetag_promise = () => {
    return db.allDocs({
      include_docs: true,
      descending: true,
      limit: 1
    }).then(response => {
      response.rows.forEach(row => {
        this.biggertext.push(row.doc.text);
      });
      return this.biggertext;
    });
  };
样本pouchdb有一个带有文本Kittens的文档-因为说真的，谁不喜欢小猫？

function getbigtag() {
  // zero reason to have this as a global.
  this.biggertext = ["Default"];
  // Use Async. Just do it.
  this.gettingthetag_async = async() => {
    try {
      const response = await db.allDocs({
        include_docs: true,
        descending: true,
        limit: 1
      });

      response.rows.forEach(row => {
        this.biggertext.push(row.doc.text);
      });

    } catch (err) {
      this.biggertext.push(err.toString());
    };
    return this.biggertext;
  };

  // Promises are nostalgic.
  this.gettingthetag_promise = () => {
    return db.allDocs({
      include_docs: true,
      descending: true,
      limit: 1
    }).then(response => {
      response.rows.forEach(row => {
        this.biggertext.push(row.doc.text);
      });
      return this.biggertext;
    });
  };

  // The road to hell is paved with callback functions.
  this.gettingthetag_callback = (cbFn) => {
    db.allDocs({
      include_docs: true,
      descending: true,
      limit: 1
    }, (err, response) => {
      if (err) {
        this.biggertext.push(err.toString());
      } else {
        response.rows.forEach(row => {
          this.biggertext.push(row.doc.text);
        });
      }
      // make the callback with the value.
      cbFn(this.biggertext);
    });
  }
  return this;
}

function get(which) {
  // clear result columns
  getEl('async_results').innerText = '';
  getEl('promise_results').innerText = '';
  getEl('callback_results').innerText = '';

  const tag = getbigtag();

  switch (which) {
    case 'async_results':
      (async() => {
        try {
          getEl(which).innerText = await tag.gettingthetag_async();
        } catch (err) {
          getEl(which).innerText = err.toString();
        }
      })();
      break;
    case 'promise_results':
      tag.gettingthetag_promise().then(that => {
        getEl(which).innerText = that;
      }).catch(err => {
        getEl(which).innerText = err.toString();
      });
      break;
    case 'callback_results':
      const my_callback = (that) => {
        getEl(which).innerText = that;
      }
      tag.gettingthetag_callback(my_callback);
      break;
  }
}

//
//  boilerplate code
//
let db;

// init example db instance
async function initDb() {

  db = new PouchDB('test', {
    adapter: 'memory'
  });

  await db.bulkDocs(getDocsToInstall());
}

// canned test documents
function getDocsToInstall() {
  return [{
    text: "Kittens"
  }]
}


initDb().then(() => {
  getEl('view').classList.remove('hide')
});

const getEl = id => document.getElementById(id);
.hide {
  display: none
}

.label {
  text-align: right;
  margin-right: 1em;
}

.hints {
  font-size: smaller;
}
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.min.js"></script>
<script src="https://github.com/pouchdb/pouchdb/releases/download/7.1.1/pouchdb.memory.min.js"></script>
<script src="https://github.com/pouchdb/pouchdb/releases/download/7.1.1/pouchdb.find.js"></script>
<table id='view' class='hide'>
  <tr>
    <td>
      <button onclick='get("async_results")'>get via async</button>
    </td>
    <td>
      <button onclick='get("promise_results")'>get via promise</button>
    </td>
    <td>
      <button onclick='get("callback_results")'>get via callback</button>
    </td>
  </tr>
  <tr>
    <td id='async_results'>
    </td>
    <td id='promise_results'>
    </td>
    <td id='callback_results'>
    </td>
  </tr>
</table>
<div style='margin-top:2em'></div>
<div id='results' class='hide'>
</div>
祝你好运！