Блог

я новичок в react native, пожалуйста, потерпите меня. В настоящее время у меня есть flatlist в моем проекте react native, который извлекает сообщения из моего бэкэнда с помощью api. Я успешно реализовал разбиение на страницы в своем бэкэнде, и в моем приложении, когда я прокручиваю до конца, оно добавляет вновь извлеченные сообщения в конец отображаемых текущих сообщений.

Моя проблема в том, что когда я прокручиваю для обновления, я хочу, чтобы отображались только сообщения страницы 0.

Что происходит, так это то, что сообщения на странице 0 добавляются в нижнюю часть сообщений вместо отображения только этих сообщений.

Так, например, когда я загружаю свое приложение, отображаются сообщения на странице 0, и когда я прокручиваю, чтобы обновить, вместо того, чтобы просто показывать сообщения на странице 0, сообщения на странице 0 добавляются в нижнюю часть сообщений на странице 0, и поэтому я получаю сообщение об ошибке, что идентификатор дублируется.

Требуемое действие, которое я пытаюсь выполнить, — это когда я прокручиваю для обновления, я просто хочу, чтобы отображались сообщения на странице 0.

Вот мой код:

 function PostsScreen({ navigation }) {
 const [posts, setPosts] = useState([]);
 const [error, setError] = useState(false);
 const [loading, setLoading] = useState(false);

  const loadPosts = async () => {
  setLoading(true);
  const response = await postsApi.getPosts(page);
  setLoading(false);

  if (!response.ok) return setError(true);

  setError(false);
  setPosts([...posts,...response.data]);
 };

 const[page,setPage]=useState(0);

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

const handleLoadMore = ()=>{
console.log('loadmore')
setPage(page 1);
}

 const [refreshing, setRefreshing] = useState(false);

 return (
 <>
  <ActivityIndicator visible={loading} />
  <Screen style={styles.screen}>
    <FlatList
      data={posts} // to have all the data
      keyExtractor={(post) => post.id.toString()}
      renderItem={({ item,index }) => (
        <Card
          title={item.title}
          subTitle={item.subTitle}
          onPress={() => navigation.navigate(routes.POST_DETAILS, {post:item,index})}
        />
      )}
      refreshing={refreshing}
      onRefresh={() => {
        loadPosts(0); // I think the problem is here.//
        setPage(0);
      }}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0}
      initialNumToRender={10}
    />
  </Screen>
</> 
);
}
 

Заранее благодарю вас.

Из того, что я прочитал, я полагаю, что вы хотите реализовать разбивку на страницы в своем приложении, и у вас это есть и в вашем коде. Теперь, когда вы пытаетесь обновить свой список, вы просто хотите установить в списке начальные 10 элементов. если это так,

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

  const loadPosts = async () => {
    setLoading(true);
    const response = await postsApi.getPosts(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(() => {
    loadPosts();
  }, [page]);

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

  const onRefresh = () => {
    setRefreshing(true);
    setPage(0);
  };


  return (
    <>
      <ActivityIndicator visible={loading} />
      <Screen style={styles.screen}>
        <FlatList
          data={posts}
          renderItem={({ item, index }) => (
            <Card
              title={item.title}
              subTitle={item.subTitle}
              onPress={() => navigation.navigate(routes.POST_DETAILS, { post: item, index })}
            />
          )}
          refreshing={refreshing}
          onRefresh={onRefresh}
          onEndReached={handleLoadMore}
          onEndReachedThreshold={0.05}
          keyExtractor={(post) => post.id.toString()}
        />
      </Screen>
    </>
  );
}
 

Это должно решить вашу проблему.

 
const loadPosts = async () => {
  setLoading(true);
  const response = await postsApi.getPosts(page);
  setLoading(false);

  if (!response.ok) return setError(true);

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


//...

onRefresh={() => {
        setPage(0);
        loadPosts(); // loadPosts takes no argument. 
      }
   }


//...

const handleLoadMore = ()=>{
    console.log('loadmore')
    setPage(page 1);
    loadPosts();
}