как создать дополнительную нагрузку в следующей js для получения остальных данных? (Далее. js Пагинация) - PullRequest
Новая
       9

как создать дополнительную нагрузку в следующей js для получения остальных данных? (Далее. js Пагинация)

0 голосов
/ 03 августа 2020

Я хочу щелкнуть внизу «Загрузить больше» и получить остальные данные в следующем. js как это сделать? на этой странице я использую getServerSideProps для получения данных из api

Код моей страницы: 

export default function Posts({ posts, popular }) {
  const classes = useStyles();
  return (
    <motion.main
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <InnerWrapper pbNone>
        <Title title="Latest Post" subTitle />
      </InnerWrapper>
      <HeroSection data={posts} />
      <InnerWrapper>
        <Grid container spacing={3}>
          <Grid item xs={12} sm={8}>
            {posts.map(item => (
              <HorizontalCard key={item.id} info={item} />
            ))}

            <LoadMoreBtn />
            
          </Grid>
          <Grid item xs={12} sm={4}>
            <div className={classes.marginBottom}>
              <Title title={"Most Popular"} subTitle side={true} />
              <SideList data={popular} />
            </div>
            <div className={classes.marginBottom}>
              <SubscribeSide />
            </div>
          </Grid>
        </Grid>
      </InnerWrapper>
    </motion.main>
  );
}

export const getServerSideProps = async ({ query }) => {
  // Fetch data from external API
  const { data: posts } = await postLists(0);
  const { data: popular } = await popularPost();
  // Pass data to the page via props
  return { props: { posts, popular } };
};

1 Ответ

0 голосов
/ 03 августа 2020

getServerSideProps - для получения данных, которые будут использоваться для первого рендеринга. В отличие от этого, ваша кнопка «Загрузить больше» должна работать на стороне клиента.

Я постараюсь обобщить шаги, которые вам следует предпринять:

  1. Чтобы иметь возможность манипулировать сообщениями, которые будут отображаться, вам нужно хранить свои элементы в состоянии, а не в реквизите. Итак, создайте состояние, используя useState, и заполните его данными, поступающими из реквизита, примерно так: 

    const [posts, setPosts] = useState(props.posts);

    С этого момента вы будете использовать это posts вместо переменной из реквизита.

  2. Добавьте кнопку «загрузить больше». Все загружающие больше сообщений бизнес-логи c должны go своему onClick обработчику. Примерно так: 

    <button
  onClick={async () => {
     const newPosts = await getNewPostsFromApi();

     setPosts(...posts, ...newPosts);
  }}
  type="button"
>
Load more
</button>
...