Pouchdb db итерация `allDocs` не возвращает значение из Reactjs в другой файл - PullRequest
Новая
       51

Pouchdb db итерация `allDocs` не возвращает значение из Reactjs в другой файл

1 голос
/ 27 мая 2020

У меня есть PouchDb в качестве локального хранилища и файл 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;

Контроллер БД выглядит так. 

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, из которого я вызываю функции. Я получаю. Отправленный объект: undefined. Я знаю, что это функция asyn c, но она должна правильно заполнять массив. Я также не могу вызвать массив снаружи.

1 Ответ

0 голосов
/ 27 мая 2020

Код повсюду с множеством проблем - например, смешивание стиля обратного вызова allDocs с основанным на обещании catch: 

db.allDocs({ include_docs: true, descending: true, limit:1 }, (err, doc) => {
  // snip
}).catch((err) => {
  // snip
});

Для стиля обратного вызова параметр err - это то, что вы ожидаете в обещаниях catch.

Если возможно, не используйте сложный для управления стиль обратного вызова. Используйте функции Asyn c или обещания.

Другая проблема - это оператор return для 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; 
});

Как уже отмечалось, именно то, что получает этот возврат стоимость? (подсказка: ничего).

Ниже приведен фрагмент кода, демонстрирующий стили Asyn c, Promise и Callback в некоторой степени в том виде, в каком вы кодировали. Например, функция стиля 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/pouchdb@7.1.1/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>

Удачи!

...