React Firebase getDocs 和 useEffect 发出两个调用

Question

我试图在react中从firebase获取数据，使用useEffect来避免创建循环。

我的代码到目前为止工作，但我得到了两次结果。当我试图找出问题所在时，我发现数据也被检索了两次。因为整个代码段被执行了两次。

——比;我收到了"Did请求"fromconsole.log("Did request!")2x times

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和"useeffect"的概念相对较新;我不知道为什么会这样。

Answer 1

这很可能是因为您启用了React严格模式?它做了一件非常烦人的事情，它渲染组件两次。删除它，它应该只渲染一次。让我知道它是否有效:

<StrictMode> <<--- remove this
<App />
</StrictMode> <<--- remove this

更新:我应该提到这是一个快速修复。双重渲染是为了确保你已经添加了查询缓存等功能，这些功能可以通过双重渲染检测到错误。

详细信息:https://github.com/facebook/react/issues/24502#issuecomment-1118754581