一审状态未更新

Question

我无法获得第一个实例的确切状态值。我在第二个实例中得到第一个实例的状态。

我的代码执行：

1. 向数据库添加新用户。
2. 如果用户已经存在于数据库中，则忽略旧用户。
3. 添加到数据库后向新用户发送邮件。

预期：如果数据库中不存在用户，则将用户添加到数据库并发送邮件。 console.log("user exists") 如果用户已经存在于数据库中。

谁能告诉我怎样才能得到预期的结果

这里是代码

import emailjs from "emailjs-com";
import React,{useState, useEffect} from 'react';
import firebase from '../firebase';

export default function Subscribe() {

const [Email, setEmail] = useState("");
const [status , setStatus]= useState();

const addLocation = data => firebase.database().ref().child('Subscribers').push(data, response => response);
const updateLocation = (id, data) => firebase.database().ref().child(`Subscribers/${id}`).update(data, response => response);

const actions = {
  addLocation,
  updateLocation,
};

function handleText(e)
{
        setEmail(e.target.value);
        
}
//console.log(Email);


function sendEmail(e) {
     
  e.preventDefault();
  
  checkDatabase();
  

  if(status)
        {
          console.log(e.target);
          console.log("mail sent");
        emailjs.sendForm('service_vq18lse', 'template_subscribe', e.target, 'user_9Nxm9mXbOkViTWV2xpkRd')
        .then((result) => {
            console.log(result.text);
        }, (error) => {
            console.log(error.text);
        });
        }
 else{
   console.log("user already exists")
 }

}

function checkDatabase() {
        
        firebase.database().ref().child("Subscribers").orderByChild('email').equalTo(Email).once("value", snapshot => {
           
          const userEmail = snapshot.val();
          console.log(userEmail);

          if (userEmail){
            //console.log("user exists!");
            setStatus(false);
            } 
          else {
            //addLocation({email: Email});
            //console.log(" new user found!");
            //console.log(e.target);
            setStatus(true);
          }
          });

    }

    
  
 
    return(
    
        <div className="container">
        <form onSubmit={sendEmail}>
                <div className="row pt-5 mx-auto">
                   
                    <div className="col-8 form-group pt-2 mx-auto">
                        <input type="email" className="form-control" placeholder="Email Address" name="user_email" onChange={handleText}/>
                    </div>
                   
                    
                    <div className="col-8 pt-3 mx-auto">
                        <input type="submit" className="btn btn-info" value="Subscribe"></input>
                    </div>
                </div>
        </form>
        </div>
    )
}

Answer 1

react useState 使堆栈上的更改保持更新，因此它不是立即的。获取新状态的最佳方法是放置一个 useEffect 来检测（将用户添加到数据库）操作何时发生，然后设置变量。