錯誤：重新渲染過多。 React 限制渲染次數以防止無限循環。 反應

Question

從 Firebase 獲取數據並將其設置為useEffect Hook 內的狀態時，我useEffect了useEffect 。

這是我使用簡化標記的代碼：

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} />
  );
}

更新！！

• 我修復了錯誤因為我意識到這是在子組件中設置狀態的問題。感謝所有投入時間幫助我的人。

Answer 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} />
  );
}

如果這不起作用，則錯誤可能來自另一個組件。