当dom在Nextjs中渲染时，如何使useEffect只运行一次，或者你能建议一些更好的方法吗

Question

我正在调用从服务器获取数据的lib文件夹中的一个函数，但这个useEffect被调用了两次；因此，它正在影响输出。你如何在Nextjs中解决这个问题？我看到了一些信息，但那是React的。如果有人想解决这个问题，那对我会很有帮助。谢谢。。。。。。

import axios from "axios";
import React from "react";
import nookies from "nookies";
import { userDetails } from "../../libs/chats";
import { useRouter } from "next/router";
import Index from "./index";
const friends = ({ token }: any) => {
const router = useRouter();
const handleLogout = () => {
const init = async () => {
const data = await axios.post("/api/auth/logout");
if (data.status === 200) {
router.push("/?login");
}
};
init();
};
React.useEffect(() => {
const getFriends = async () => {
const { data } = await userDetails(token);
if (!data.username) {
prompt("Enter a name : ");
}
};
if (!token) {
router.push("/?login");
return;
}
getFriends();
}, []);
return (
<Index>
<button onClick={handleLogout}>Logout</button>
</Index>
);
};
export default friends;
export const getServerSideProps = async (ctx: any) => {
const cookies = nookies.get(ctx);
const token = cookies.token;
return {
props: {
token: token || null,
},
};
};

Answer 1

尝试在useEffect中的依赖数组中传递token对象。这将导致useEffect仅在令牌更改时运行：

React.useEffect(() => {
const getFriends = async () => {
const { data } = await userDetails(token);
if (!data.username) {
prompt("Enter a name : ");
}
};
if (!token) {
router.push("/?login");
return;
}
getFriends();
}, [token]);