错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。反应答案

【问题标题】：Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. React错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。反应
【发布时间】：2021-10-05 06:11:39
【问题描述】：

我在从 Firebase 获取数据并将其设置为 useEffect Hook 中的状态时遇到了下面提到的错误。

这是我使用简化标记的代码：

function PostComponent({ id }){
  const [post,setPost] = useState({});
  const [error,setError] = useState("");

  const db = firebase.firestore();

  useEffect(()=>{
    db.collection('posts').doc(id).get().then(doc=>{
      setPost(doc.data());
    }).catch(err=>setError(err.message));
  }, []);

  return (
    {error && <h1>{ error }</h1>}
    <PostCard data={post} />
  );
}

更新！！

我修复了错误，因为我意识到这是在子组件中设置状态的问题。感谢所有投入时间帮助我的人。

【问题讨论】：

您确定这是导致错误的组件吗？
在您的 useEffect() 中，您没有列出实际的依赖项 (useEffect(() => { ... }, [id, setPost, setError]))
没有理由在useEffect 之外定义db。现在的代码方式，firebase.firestore() 在每次渲染时执行。
我已经尝试了此线程上列出的所有解决方案但它不起作用。我通过注释掉 setPost(doc.data()) 尝试了代码然后它可以工作但现在我无法加载帖子。因为我说过这是简化的jsx 我将帖子作为道具传递给多个组件。
感谢您的时间和帮助，我通过更改子组件中的几行代码来修复错误

标签： javascript reactjs firebase react-hooks use-effect

【解决方案1】：

你可以试试这样吗：


//this can be outsite of your component
const db = firebase.firestore();

function PostComponent({ id }){
  const [post,setPost] = useState({});
  const [error,setError] = useState("");

  useEffect(()=>{
    db.collection('posts').doc(id).get().then(doc=>{
      setPost(doc.data());
    }).catch(err=>setError(err.message));
  }, [id]);

  return (
    {error && <h1>{ error }</h1>}
    <PostCard data={post} />
  );
}

如果这不起作用，则错误可能来自另一个组件。

【讨论】：

我试过了，但错误仍然存在
我得出的结论是，在useEffect 中设置状态会导致无限渲染循环，尽管我已经在其他组件中这样做并且效果很好。
唯一会导致该组件重新渲染的是id 和setPost 的更改。但是当您调用 setPost 时，它不会调用 useEffect 以结束无限循环。
感谢上面提到的帮助我决定重写组件以摆脱这个错误