Question

从 Firebase 获取数据并将其设置为 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} />
  );
}

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

错误：重新渲染过多。 React 限制渲染次数以防止无限循环。反应

更新！！

1 个答案: