我尝试在react中从firebase获取数据，使用useEffect来避免创建循环。
我的代码到目前为止工作正常，但我得到了两次结果。当我试图找出问题所在时，我发现数据也被检索了两次。因为整个代码段都执行了两次。
--〉我从console.log("Did request!")收到2x次“Did request！”

import React, { useEffect, useState } from "react";
import { db } from "../firebase-config";
import { collection, getDocs } from "firebase/firestore";

function MusicList() {
  const [musicList, setMusicList] = useState([]);

  const getData = async () => {
    try {
      const querySnapshot = await getDocs(collection(db, "music"));
      querySnapshot.forEach((doc) => {
        setMusicList((oldArray) => [...oldArray, doc.data()]);
      });
      console.log("Did request!");
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="MusicList">
      {musicList.map((music) => {
        return <div key={music.id}>{music.songName}</div>;
      })}
    </div>
  );
}

export default MusicList;

作为一个相对较新的React和“使用效果”的概念，我不知道为什么会发生这种情况。