有没有一种方法可以根据状态或道具调用不同的rtq钩子?也许用skip

Question

我有一个组件，我想在其中根据条件调用不同的rtkquery钩子。我正在制作一个twitter克隆，在主页上我想调用getPostsList，在配置文件页面上我想调出getRetweetedPostsList。但由于除此之外，整个页面都是相同的，所以我使用了一个组件。现在我想在PostList组件中基于props调用不同的钩子？这可能吗？也许用skip？这是否违反了最佳实践？

index.tsx

import type { NextPage } from 'next'
import { useSession} from 'next-auth/react';
import SignUpLoginFullScreen from '../components/SignUpLoginFullScreen';
import LoadingScreen from '../components/LoadingScreen';
import PostsSection from '../components/Posts/PostsSection';
const Home: NextPage = () => {  
const {data:session,status}=useSession();
return (
<>

{!session && status==='unauthenticated' && 
<SignUpLoginFullScreen/>
}

{!session && status==='loading' && 
<LoadingScreen/>
}

{session && status==='authenticated' &&
<PostsSection/>
}
</>
)
}
export default Home

PostSection.tsx

import React from 'react'
import { useSession} from 'next-auth/react';
import Sidebar from '../Sidebar';
import Search from '../Search';
import PostsList from '../Posts/PostsList';
import AddPostForm from '../Posts/AddPostForm';
import Modal from '../Modal';
import UsersList from '../UsersList';
const PostsSection=()=>{
const {data:session,status}=useSession();
return (
<>
<Modal>
<AddPostForm />
</Modal>
<div className='flex mx-32 gap-x-5'>
<Sidebar/>
<main className='mr-5 pt-8 flex-1 basis-[45%] border-x-2 border-stone-100 min-h-screen'>
<PostsList currUserId={session?.userId}/>
</main>
<div className='basis-[25%]'>
<Search/>
<UsersList currentUserId={session?.userId}/>
</div>
</div>
</>
)
}
export default PostsSection

PostList.tsx

import React from 'react'
import {useGetPostsQuery} from '../../services/apiSlice';
import LoadingSpinner from '../LoadingSpinner';
import Post from './Post';
interface PropsType{
currUserId:string|any
}
const mapPosts=(posts:any,currUserId:string)=>{
return posts?.map((post:any) => (
<Post key={post.id} currUserId={currUserId} {...post}/>
))
};
const PostsList:React.FC<PropsType>= ({currUserId}) => {
const {data:posts,isLoading,error,isError} = useGetPostsQuery(currUserId);

let content;
content=React.useMemo(()=>mapPosts(posts,currUserId), [posts]);
if(isLoading){
content=<LoadingSpinner/>
}
else if(isError){
let a:any=error
content=<p color='red'>{a?.message}</p>
}
else if(posts){
if(posts.length<=0){
console.log('aye')
content=<p color='black'>No tweets yet</p>;
return null;
}
}
return (
<section className="posts-list">
{content}
</section>
)
}
export default PostsList;

我想从配置文件页面调用PostList组件，但有了一些道具，基于这些道具，我想调用一个不同的钩子，我为索引页面调用这个钩子。

Profile.tsx

import React from 'react';
import { useSession } from 'next-auth/react';
import LoadingScreen from '../components/LoadingScreen';
import Sidebar from '../components/Sidebar';
import Search from '../components/Search';
import PostsList from '../components/Posts/PostsList';
import AddPostForm from '../components/Posts/AddPostForm';
import Modal from '../components/Modal';
import UsersList from '../components/UsersList';
import SignUpLoginFullScreen from '../components/SignUpLoginFullScreen';
import PostsSection from '../components/Posts/PostsSection';
export default function Profile() {
const {data:session,status}=useSession();
return (
<>

{!session && status==='unauthenticated' && 
<SignUpLoginFullScreen/>
}

{!session && status==='loading' && 
<LoadingScreen/>
}

{session && status==='authenticated' &&
<PostsSection/>
}
</>
)
}

Answer 1

我会使用不同的组件来调用不同的钩子，然后将数据传递给可重用的公共组件。