import React, { useState, useMemo } from 'react';
import PouchDB from 'pouchdb-browser';
import findPlugin from 'pouchdb-find';

const PouchdbContext = React.createContext({
    availableScanners: [''],
    changeDb: () => {},
});

export function PouchdbContextProvider({ children }) {
  // const [localDb, setLocalDb] = useState();
  // const [remoteDb, setRemoteDb] = useState();
  const [id, setId] = useState();

  const baseUrl = 'http://*:*';
  const username = '********';
  const password = '****';

  PouchDB.plugin(findPlugin);

  setId(localStorage.getItem('cb-remoteDb'));
  // const localDb = new PouchDB(`localdb${id}`);
  const contextValue = useMemo(async () => {
    const changeDbHandler = (index) => {
      setId(index);
    };
    const localDb = await new PouchDB(`localdb${id}`);
    localDb.info();
    const remoteDb = new PouchDB(`${baseUrl}/remote${id}`, {
      auth: { username, password },
    });
    remoteDb.info();

    PouchDB.sync(localDb, remoteDb, { live: true, retry: true });

    return { localDb, changeDb: changeDbHandler };
  }, [id]);
  return (
    <PouchdbContext.Provider value={contextValue}>
      {children}
    </PouchdbContext.Provider>
  );
}
export default PouchdbContext;

我试图为pouchdb创建一个上下文提供程序。我得到一个错误，说要多次重新呈现。错误：太多的重新渲染。React限制了渲染的数量，以防止无限循环。