UseEffect 未在子组件中触发

Question

我有一个“用户”对象，该对象已加载到父组件中，并传递给该子“提要”组件。 但是，我正在使用 useEffect 挂钩来尝试使用该用户对象加载更多数据，但 useEffect 块永远不会被触发。在这里使用永远不会显示的 console.log 进行测试。但即使当我用来加载“posts”和“setLoading”的正常异步函数位于块中时，也不会发生任何事情。

似乎 useEffect 总是被忽略，并且“正在加载”和“无帖子”div 总是显示出来。

孩子：

const Feed = ({user}: FeedProps) => {
    const [posts, setPosts] = useState<
        { text: string | null; id: string; userId: string; file: string | null; timeStamp: Date }[] | null
    >(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        console.log("fetching posts");
    }, [user]);

    console.log("posts: ", posts);

    if (loading) {
        return <div>Loading...</div>;
    }

    if (!posts || posts.length === 0) {
        return <div>No posts available.</div>; 
    }

    return (
        <div className=" border-2 border-solid border-violet-700 w-5/6 h-full">
            {posts?.map((post) => (
                <PostCard key={post.id} post={post}/>
            ))}
        </div>
    )
}

export default Feed;

家长：

const ProfilePage = () => {

    const user = useCurrentUser();  

    return (
          {user && <Feed user={user}/>}
    )
}
export default ProfilePage;

辅助功能：

import { useSession } from "next-auth/react";

export const useCurrentUser = () => {

    const { data: session } = useSession();

    return session?.user;
};

import { db } from "@/lib/db";

export const getUserPosts = async (userId: string) => {
    try {
        const posts = await db.post.findMany({ where: { userId } });
        return posts;
    } catch (error) {
        console.error("Error fetching posts:", error);
        return null;
    }
}

Answer 1

代码中的问题可能是由于 Feed 组件呈现时用户无法立即可用。由于用户来自父组件（ProfilePage），它最初可能是未定义的或为空，导致子（Feed）组件中的 useEffect 跳过运行，因为它没有检测到用户的更改。

useEffect(() => {
if (user) {
    const fetchPosts = async () => {
        console.log("Fetching posts for user:", user);
        const userPosts = await getUserPosts(user.id);
        setPosts(userPosts);
        setLoading(false);
    };

    fetchPosts();
}

}，[用户]）；