React/Firebase中setState不更新，需两次点击提交按钮渲染证书

Hey there, let's break down why you're needing two clicks to get your certificates to render correctly. The root problem here is asynchronous code execution—Firebase's database query doesn't return data immediately, and right now you're updating your component state before the query finishes fetching the data.

What's Happening Right Now: #

1. You click submit, processEmail runs, and you kick off the Firebase query with on('value').
2. Before Firebase can send back the data, your code moves on to call this.setState({ cert: certs })—but certs is still an empty array at this point.
3. The component re-renders with an empty cert state, so nothing shows up.
4. When you click submit again, the previous Firebase query finally finishes and fills the certs array, so this time setState uses the populated array and renders correctly.

The Fix: Move setState Inside the Firebase Callback #

You need to wait until Firebase returns the snapshot data before updating your state. Here's the adjusted code:

processEmail(e) {
  e.preventDefault();
  const inputEmail = this.inputEl.value;
  let certs = [];

  Fire.database().ref().orderByChild('Email').equalTo(inputEmail).on('value', (snapshot) => {
    if (snapshot.exists()) {
      certs = []; // Reset certs in case of future data changes
      snapshot.forEach((childSnapshot) => {
        // Simplified: childSnapshot is already the child node, no need to use the key with the parent snapshot
        certs.push(childSnapshot.child('Item').val());
      });
    } else {
      console.log('nope');
      alert("Looks like we can't find you.");
      certs = []; // Clear certs if no user is found
    }
    // Update state ONLY after we've processed the snapshot data
    this.setState({ cert: certs });
  });
}

Bonus: Use once('value') If You Don't Need Real-Time Updates #

If you only need to fetch the certificate data once (not listen for real-time changes), using once('value') is cleaner and avoids keeping an active listener on the database. It returns a Promise, so you can use .then() for better readability:

processEmail(e) {
  e.preventDefault();
  const inputEmail = this.inputEl.value;

  Fire.database().ref().orderByChild('Email').equalTo(inputEmail)
    .once('value')
    .then((snapshot) => {
      let certs = [];
      if (snapshot.exists()) {
        snapshot.forEach((childSnapshot) => {
          certs.push(childSnapshot.child('Item').val());
        });
      } else {
        console.log('nope');
        alert("Looks like we can't find you.");
      }
      this.setState({ cert: certs });
    })
    .catch((error) => {
      console.error('Error fetching certificates:', error);
      alert('Oops, something went wrong while retrieving your certificates.');
    });
}

Key Takeaways: #

• Asynchronous operations like Firebase database queries don't block code execution—always handle state updates inside their callbacks or .then() blocks.
• Use on('value') only if you need to listen for real-time changes to the data; otherwise, once('value') is more efficient.

内容的提问来源于stack exchange，提问作者Tim Wilson