Hey there, let's break down what's going wrong here and fix it step by step!

First, let's unpack the key issues you're facing:

1. Frequent setState calls in loops cause state inconsistencies and unmount warnings #

Calling setState inside a map loop is a bad practice for two main reasons:

• setState is asynchronous, so multiple calls in a loop will lead to unpredictable state updates—your enrolledPlayersList won't end up with the correct values.
• If your component unmounts while this loop is running, the leftover setState calls will trigger the "can't perform update on an unmounted state" warning.

2. Incorrect arrayUnion usage prevents data from being stored #

firebase.firestore.FieldValue.arrayUnion is designed to add individual unique elements to an array field. Right now, you're passing the entire finalList as a single element—this means Firestore will store the whole array as one entry in the players field, not add each player ID individually.

3. Potential memory leak risk #

If the Firestore update operation finishes after your component unmounts, it can cause memory leaks. We need a way to check if the component is still mounted before running async operations.

Full Fixed Code #

class YourComponent extends React.Component {
  _isMounted = false;

  componentDidMount() {
    this._isMounted = true;
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  // Example method for uploading players
  uploadEnrolledPlayers = () => {
    // Calculate the enrolled list first, no looped setState calls
    const enrolledPlayersList = this.state.players
      .filter(player => player.Present === true)
      .map(player => player.id);

    // Only proceed if the component is still mounted
    if (this._isMounted) {
      // Update state once, then run Firestore operation in the callback
      this.setState({ enrolledPlayersList }, () => {
        const dbh = firebase.firestore();
        dbh.collection("Groups").doc(this.state.group)
          .collection('Enrolled').doc('ids')
          // Spread the array to add each ID individually with arrayUnion
          .update({ players: firebase.firestore.FieldValue.arrayUnion(...enrolledPlayersList) })
          .then(() => {
            console.log("Data saved successfully!");
          })
          .catch(err => {
            console.error("Failed to save data:", err);
          });
      });
    }
  }

  // Rest of your component code...
}

Key Fixes Explained #

• No more looped setState: Use filter + map to compute the final list in one go, then update state once. This avoids async state chaos.
• Correct arrayUnion usage: Use the spread operator ... to pass each player ID as a separate argument—this tells arrayUnion to add each ID to the Firestore array (skipping duplicates automatically).
• Prevent unmounted operations: The _isMounted flag tracks if the component is active. We only run setState and Firestore calls if the component is still mounted, eliminating warnings and leaks.
• Error handling: Added a catch to the Firestore call so you can debug why storage fails if it happens again.

内容的提问来源于stack exchange，提问作者kerim Erkan