英文:
Too many rerenders in useContext for pouchDb
问题
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 [id, setId] = useState();
const baseUrl = 'http://*:*';
const username = '********';
const password = '****';
PouchDB.plugin(findPlugin);
setId(localStorage.getItem('cb-remoteDb'));
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;
I'm trying to create a Context Provider for PouchDB. I get an error saying "Too many re-renders. React limits the number of renders to prevent an infinite loop."
英文:
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;
I'm trying to create a Context Provider for pouchdb.
I get an error saying to many rerenders.
Error : Too many re-renders. React limits the number of renders to prevent an infinite loop.
答案1
得分: 0
你应该将所有这些逻辑放在 useEffect
内部,因为这样可以防止 React 正确管理效果并在渲染期间中断组件。React 在两个地方明确说明了这一点,第一个是在名为 The Rules 的 GitHub 要点中,我强烈建议你阅读它,它将为你澄清很多事情并纠正错误的想法。第二个是在 新的 React 文档 中...如果你参考它,你会看到 React 仅允许你在渲染期间调整状态,但这是一个特殊的状态,任何其他副作用都应该在效果处理程序(例如 useEffect
)中,以使组件尽可能保持纯粹。
如果你在 useEffect
中放置它们,然后告诉我发生了什么!
英文:
You should put all of this logic inside of useEffect
because this way prevents React from managing effects properly and breaks the Component during rendering, React has clarified it in two places, the first is in a GitHub gist in a document named The Rules I highly recommend you to read it will clarify a lot of things to you and will correct wrong thoughts, and the second one is in the new React docs...if you referred to it you'd see that React only lets you adjust the state during rendering but this is an exceptional state and any other side-effect should be in an effect handler (such like useEffect
) to keep the component pure as much as possible.
You made a serious mistake by making HTTP requests to some external system or synchronizing with some external system outside effect handler and actually, those cases should only exist inside of the effect handler, a matter of fact, React made useEffect
exactly for them!
so put them all in useEffect
then tell me what happened!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论