React native 如何分别对每个特定选项卡应用分页和加载更多？

所以我现在有一个水平滚动视图的屏幕，其中包含我的分类标签。当按下选项卡时，下面将呈现一个平面列表，其中包含该类别的所有特定帖子（此部分工作正常）

当屏幕最初加载时，默认情况下会选择第一个选项卡，并且该选项卡的所有帖子都呈现在下面

现在，我已经在我的后端应用了分页，当我在postman上测试它时，它正在工作

我的问题是：

如果我选择tab 1，第一页（page=0）的帖子会被呈现，然后当我向下滚动时，页面计数会增加到2，但没有帖子被呈现。另外，当我选择tab 2时，页面计数不会重置回0，而是从tab 1中停止的位置继续

在选项卡1中，如果我一直向下滚动到第10页，则选择选项卡2

我希望选项卡2中的页面计数从0开始

发生了什么？选项卡2中的页面计数从10开始

这是我的密码：

const getCategoryPostsAPI = (id,page)=>client.get(`/categories/${id}?page=${page}`)

function tabScreen({ navigation,route }) {
const [posts, setPosts] = useState([]);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const[page,setPage]=useState(0);

const loadPosts = async (id) => {
setLoading(true);
const response = await getCategoryPostsAPI(id,page) //API call
setLoading(false);

if(refreshing) setRefreshing(false);
if (!response.ok) return setError(true);
setError(false);

if(page===0){
  setPosts(response.data)
}else{    
setPosts([...posts,...response.data]);
}};

useEffect(() => {
loadPosts(1,page);
}, [page]);

const categories = [
{
label: "Sports",
id: 1,
},
{
label: "Fashion",
id: 2,
},
{
label: "News",
id: 3,
},
{
label: "Cooking",
id: 4,
},
{
label: "Education",
id: 5,
}]

const handleLoadMore = ()=>{
setPage(page+1);
}

const[label,setLabel]=useState('Sports')

const setLabelFilter=label=>{
setLabel(label)
}

const [currentCategoryId, setCurrentCategoryId] = useState()

const toggleBrands = (categoryId) => {
setCurrentCategoryId(categoryId)
setLabel(label)
};

return (

<ScrollView 
horizontal 
showsHorizontalScrollIndicator={false}
>
{categories.map(e=>(
        <TouchableOpacity 
            key={e.id}
            onPress={()=>{toggleBrands(e.id),
                          setLabelFilter(e.label),
                          loadPosts(id=e.id),                        
                          setPage(0) // here i am trying to set the page to 0 on tab click 
                                        but it is not working
                          }}
            selected={e.id === currentCategoryId}
            >
        <Text>{e.label}</Text>
        </TouchableOpacity>
))}
</ScrollView>

<FlatList
  data={currentCategoryId ? posts.filter(post=>post.categoryId===currentCategoryId
    ):posts.filter(post=>post.categoryId===1)} 
  keyExtractor={(post) => post.id.toString()}
  renderItem={({ item,index }) => (
   <Card
      title={item.title}
      subTitle={item.subTitle}
      onPress={() => navigation.navigate(routes.POST_DETAILS, {post:item,index})}
    />
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.000001}
      initialNumToRender={10}
  )}
/>

const getCategoryPostsAPI=（id，page）=>client.get（`/categories/${id}？page=${page}`）
功能选项卡屏幕（{导航，路线}）{
const[posts，setPosts]=useState（[]）；
const[error，setError]=useState（false）；
const[loading，setLoading]=useState（false）；
const[page，setPage]=useState（0）；
const loadPosts=async（id）=>{
设置加载（真）；
const response=await getCategoryPostsAPI（id，page）//API调用
设置加载（假）；
如果（刷新）设置刷新（错误）；
如果（！response.ok）返回setError（true）；
设置错误（假）；
如果（第===0页）{
设置柱（响应数据）
}否则{
setPosts（[…posts，…response.data]）；
}};
useffect（（）=>{
装载柱（1页）；
}，[第页]；
常量类别=[
{
标签：“运动”，
id:1，
},
{
标签：“时尚”，
id:2，
},
{
标签：“新闻”，
id:3，
},
{
标签：“烹饪”，
id:4，
},
{
标签：“教育”，
id:5，
}]
常量handleLoadMore=（）=>{
设置页面（第+1页）；
}
const[label，setLabel]=useState（'Sports'）
常量setLabelFilter=标签=>{
设置标签（标签）
}
常量[currentCategoryId，setCurrentCategoryId]=useState（）
const toggleBrands=（类别ID）=>{
setCurrentCategoryId（categoryId）
设置标签（标签）
};
返回(
{categories.map（e=>(
{切换品牌（e.id），
setLabelFilter（即标签），
装载柱（id=e.id），
setPage（0）//在这里，我试图在单击选项卡时将页面设置为0
但它不起作用
}}
所选={e.id==currentCategoryId}
>
{e.label}
))}
post.categoryId==currentCategoryId
)：posts.filter（post=>post.categoryId==1）}
keyExtractor={（post）=>post.id.toString（）}
renderItem={（{item，index}）=>(
导航（routes.POST_DETAILS，{POST:item，index}）}
/>
onEndReached={handleLoadMore}
onEndReachedThreshold={0.000001}
initialNumToRender={10}
)}
/>

---

我认为我的分页实现错误，这就是为什么我的handleloadmore不起作用的原因，因为我在不同的屏幕中使用了相同的handleloadmore，并且它正在工作。

我猜您希望在单击另一个类别时将页面重置为0，并且在滚动单个类别时希望对数据进行分页。如果是，试试这个

const getCategoryPostsAPI = (id, page) => client.get(`/categories/${id}?page=${page}`);

const categories = [
  {
    label: "Sports",
    id: 1,
  },
  {
    label: "Fashion",
    id: 2,
  },
  {
    label: "News",
    id: 3,
  },
  {
    label: "Cooking",
    id: 4,
  },
  {
    label: "Education",
    id: 5,
  }
];

function tabScreen({ navigation, route }) {
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(0);
  const [label, setLabel] = useState(categories[0]?.label);
  const [currentCategoryId, setCurrentCategoryId] = useState(1);

  const loadPosts = async (id, page = 0) => {
    setLoading(true);
    const response = await getCategoryPostsAPI(id, page)
    setLoading(false);
    if (refreshing) setRefreshing(false);
    if (!response.ok) return setError(true);
    setError(false);
    if (page === 0) {
      setPosts(response.data)
    } else {
      setPosts([...posts, ...response.data]);
    }
  };

  useEffect(() => {
    if (page > 0)
      loadPosts(currentCategoryId, page);
  }, [page]);

  useEffect(() => {
    setPage(0);
    loadPosts(currentCategoryId, 0);
  }, [currentCategoryId])

  const handleLoadMore = () => {
    setPage(page + 1);
  };

  const setLabelFilter = label => {
    setLabel(label);
  };

  const toggleBrands = (categoryId) => {
    setCurrentCategoryId(categoryId);
  };

  const postsToBeDisplayed = () => posts.filter(post => post.categoryId === currentCategoryId);

  return (
    <>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
      >
        {categories.map(e => (
          <TouchableOpacity
            key={e.id}
            onPress={() => {
              toggleBrands(e.id);
              setLabelFilter(e.label);
            }}
            selected={e.id === currentCategoryId}
          >
            <Text>{e.label}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      <FlatList
        data={postsToBeDisplayed()}
        renderItem={({ item, index }) => (
          <Card
            title={item.title}
            subTitle={item.subTitle}
            onPress={() => navigation.navigate(routes.POST_DETAILS, { post: item, index })}
          />
        )}
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.000001}
        initialNumToRender={10}
        keyExtractor={(post) => post.id.toString()}
      />
    </>
  )
};

const getCategoryPostsAPI=（id，page）=>client.get（`/categories/${id}？page=${page}）；
常量类别=[
{
标签：“运动”，
id:1，
},
{
标签：“时尚”，
id:2，
},
{
标签：“新闻”，
id:3，
},
{
标签：“烹饪”，
id:4，
},
{
标签：“教育”，
id:5，
}
];
功能选项卡屏幕（{导航，路线}）{
const[posts，setPosts]=useState（[]）；
const[error，setError]=useState（false）；
const[loading，setLoading]=useState（false）；
const[page，setPage]=useState（0）；
const[label，setLabel]=使用状态（类别[0]？.label）；
const[currentCategoryId，setCurrentCategoryId]=useState（1）；
const loadPosts=async（id，page=0）=>{
设置加载（真）；
const response=wait getCategoryPostsAPI（id，第页）
设置加载（假）；
如果（刷新）设置刷新（错误）；
如果（！response.ok）返回setError（true）；
设置错误（假）；
如果（第===0页）{
设置柱（响应数据）
}否则{
setPosts（[…posts，…response.data]）；
}
};
useffect（（）=>{
如果（页面>0）
装载柱（当前类别ID，第页）；
}，[第页]；
useffect（（）=>{
设置页面（0）；
装载柱（当前类别ID，0）；
}，[currentCategoryId]）
常量handleLoadMore=（）=>{
设置页面（第+1页）；
};
常量setLabelFilter=标签=>{
setLabel（标签）；
};
const toggleBrands=（类别ID）=>{
setCurrentCategoryId（categoryId）；
};
const postsToBeDisplayed=（）=>posts.filter（post=>post.categoryId===currentCategoryId）；
返回(
{categories.map（e=>(
{
切换品牌（e.id）；
setLabelFilter（即标签）；
}}
所选={e.id==currentCategoryId}
>
{e.label}
))}
(
导航（routes.POST_DETAILS，{POST:item，index}）}
/>
)}
onEndReached={handleLoadMore}
onEndReachedThreshold={0.000001}
initialNumToRender={10}
keyExtractor={（post）=>post.id.toString（）}
/>
)
};

---

但是，如果要实现选项卡功能，我建议使用。这将使整个过程更加轻松。

嗨，谢谢你回复我，非常感谢。我尝试过上面的代码，但它不起作用，但我通过以下操作使它起作用：1）我从第一个useEffect中删除了if（页面>0）；2）在touchableOpacity onPress中，我添加了loadPosts（id=e.id）和setPage（0）。如果可能，我还有另一个问题，当屏幕默认加载第一个选项卡时，但t