현직 학생으로 학교 공연장 좌석 얘매 웹사이트를 만들고 있습니다. 지금 문제를 겪고 있는 부분은 유저가 좌석을 선택하고 이를 데이터베이스에 저장할때 발생하고 있습니다. 이 에러를 더 설명하기 앞서 제 코드에 대한 설명을 조금 하겠습니다: 사용자가 선택한 performance(공연) 및 seat(좌석)을 데이터베이스에 저장하는 작업을 하고 있습니다(사용자가 공연 및 좌석 div를 클릭하면 Firebase는 selectPerformance 및 selectSeat(hook)를 호출하고 선택한 데이터를 저장합니다. 여기서부터는 제가 생각했을때 제 코드가 작동해야하는 방식입니다. 사용자가 제출 버튼을 클릭하면 selectPerformance에 의해 저장된 데이터와 selectSeat는 firebase collection(performance)과 document(seat)에 있는 email이라는 field가 빈 field인지 읽는 데 사용됩니다. 이메일 필드가 비어 있으면 사용자의 이메일이 해당 필드에 저장됩니다 . 그렇지 않으면 데이터가 저장되지 않습니다. 오류는 사용자가 처음으로 제출 버튼을 클릭하면 필드가 비어 있어도 이메일이 저장되지 않는다는 것입니다. 그러나 사용자가 좌석을 고르고 두 번째로 제출 버튼을 클릭하면 필드에 이메일이 있더라도 사용자 이메일이 선택한 좌석 document에 저장됩니다. 더 나아가, 사용자가 페이지를 새로고침하지 않는 이상, 사용자가 두 번째로 제출 버튼을 눌러 데이터베이스에 이메일을 제출하면, 사용자는 좌석을 선택하고 제출 버튼을 눌러도, 필드가 비어있어도 데이터베이스에 데이터를 다시 제출할 수 없습니다.혹시 여러분들중 왜 이러한 문제가 일어나는지 아시는 분이 계시면 도와주세요...

import { authService, dbService } from "myBase";
import React, { useState } from "react";

const Ticketing = () => {
    //initializes the variables that are going to be taken in, initializing the information that will be selected by the user
    const [performance, selectPerformance] = useState("");
    const [seat, selectSeat] = useState("");
    const user = authService.currentUser;
    const userEmail = user.email;
    const [seatEmail, setSeatEmail] = useState("");
    const [Empty, isEmpty] = useState();

    const onSubmit = async (event) => {
        await dbService.collection(performance).doc(seat).get().then(
            (snapshot) => setSeatEmail(snapshot.data())
            );
            console.log("check");
            console.log(seatEmail);

        if(seatEmail === ""){
            isEmpty(true);
            console.log("empty true");
        }
        else if(seatEmail !== ""){    
            isEmpty(false);
            console.log("empty false");
        }
        console.log(Empty);


        if(Empty === true){
            const ticketingDB = dbService.collection(performance).doc(seat);
            return  ticketingDB.set(
                {email:userEmail}
            )

        }
        else {
            console.log("not available");
        }
        selectPerformance();
        selectSeat();
    } 

    return(
        <div>
             <div onClick={() => selectPerformance("performance-1")}>
                Performance 1
            </div>
            <div onClick={() => selectPerformance("performance-2")}>
                Performance 2
            </div>
            <row>
                <div onClick={() => selectSeat("a1")}>1</div>
                <div onClick={() => selectSeat("a2")}>2</div>
                <div onClick={() => selectSeat("a3")}>3</div>
                <div onClick={() => selectSeat("a4")}>4</div>
            </row>
            <span>{performance}</span>
            <span>{seat}</span>
            <input type="submit" onClick={onSubmit}/>
        </div>

        
        
    )


};
export default Ticketing;