2

我一直在用 React 开发一个事件注册网站。一切都很好,直到我遇到这个:

react-dom.development.js:67 警告:无法对未安装的组件执行 React 状态更新。这是一个空操作,但它表明您的应用程序中存在内存泄漏。要解决此问题,请在 useEffect 清理函数中取消所有订阅和异步任务。

我正在使用 Firebase 来存储内容。而且我不知道是因为上面的警告还是其他原因,但是每次有渲染时,数据库中都会有大量从我的集合中读取。我认为每次刷新时,集合都会再次被完全阅读。应该发生的情况是,如果它最初进行 n 次读取,对于更改它应该进行 1 次读取,但它正在进行 n+1 次读取(所有元数据也被更新并再次读取),一旦导致最大限制读取(50K)我 。有解决办法吗?

我的主页组件:

import React,{useState,useEffect} from 'react';
import {deleteDoc, getDocs,collection,doc} from 'firebase/firestore';
import {db,auth} from '../firebasecode';

function Home({isAuth}) {
    const [postEvents,setPostEvents]=useState([]);
    const collectionRef=collection(db,"event_details");

    useEffect(() => {
        const getEvents=async ()=>{
            const data= await getDocs(collectionRef);
            console.log(data);
            setPostEvents(data.docs.map((doc)=>({
                ...doc.data(),
                id: doc.id
            })
            ));
        }

        getEvents();
    });

    const deleteEvent= async (id)=>{
        const postDoc=doc(db,"event_details",id);
        await deleteDoc(postDoc);
    };
    
    return (
        <div className="homePage">
            {postEvents.map((post)=>{
                return (
                <div className="post">
                    <div className="postTextContainer"><img className="imgmolder" src={post.eventimage}></img></div>
                    <div className="postHeader">
                        <div className="title"><h1>{post.eventname}</h1></div>
                        <div className="deletePost">
                        {isAuth && post.author_id === auth.currentUser.uid && 
                        (<button onClick={()=>{deleteEvent(post.id)}}>&#128465;</button>)}
                        </div>
                    </div>
                    <div className="postTextContainer">Eligibility criteria: {post.elig}</div>
                    <div className="postTextContainer">Team size: {post.teamsize}</div>
                    <div className="postTextContainer">Registration start:   {post.regstart}</div>
                    <div className="postTextContainer">Registration end:     {post.regend}</div>
                    <div className="postTextContainer">Competition start:    {post.compstart}</div>
                    <div className="postTextContainer">Competition end:      {post.compend}</div>
                    <div className="postTextContainer">Registration Fee:     Rs.{post.fee}</div>
                    <div className="postTextContainer">Mode: {post.mode}</div>
                    <div className="postTextContainer">Description: {post.description}</div>
                    <div className="postTextContainer"><a href={post.linkurl}>Registration link</a></div>
                    
                    <h3>@{post.author_name}</h3>
                  
                </div>);
            })}
        </div>
    );
}

export default Home;
4

0 回答 0