react组件中没有依赖项的useEffect执行两次

Question

你好，我的useEffect有问题。它没有依赖项，因为我只想执行一次。我也在使用反应路由器v6。但是Profiles.js组件中的useEffect运行了两次，我不知道如何修复它。下面是作为Profile的父组件的App组件和问题所在的Profile组件。

App.js:

function App() {
return (
<div>
<Navbar />
<Routes>
<Route
element={<Navigate replace={true} to={"/welcome"} />}
path="/"
/>
<Route element={<Profiles />} path={`/profiles`} exact />
<Route element={<LandingPage />} path={"/welcome"} />
<Route element={<Main />} path={"/main"} />
<Route element={<MyProfile />} path={"/myprofile"} />
</Routes>
</div>
);
}
export default App;

Profiles.js:

const Profiles = (props) => {
const [profiles, setProfiles] = useState([]);
useEffect(() => {
const fetchProfiles = async () => {
console.log("profiles");
// const snapshot = await get(ref(database, `users/`));
// if (snapshot.exists()) {
//     const response = snapshot.val();
//     for (const uid in response) {
//         if (uid !== user.uid) {
//             setProfiles((prevState) => {
//                 return [response[uid], ...prevState];
//             });
//         }
//     }
// }
};
}, []);
return (
<div>
<ProfileRecommendation />
</div>
);
};
export default Profiles;

Answer 1

您很可能启用了<React.StrictMode/>(在<React.StrictMode/>中包装应用程序的某个位置(。这种行为只会发生在development环境中(意味着在生产环境中useEffect只运行一次(。如果您不希望development环境中出现这种行为，请移除<React.StrictMode/>包装器。

您可以在此处阅读有关StrictMode的更多信息：https://reactjs.org/docs/strict-mode.html

Answer 2

在开发模式下，由于严格模式，usseefect运行两次，构建您的项目，您可以看到它在执行时工作。