时间戳

首页 > 解决方案 > 使用加载更多按钮获取更多数据而不会丢失以前的数据

reactjs - 使用加载更多按钮获取更多数据而不会丢失以前的数据

问题描述

我想一次只加载 10 个帖子，当我按下加载更多按钮时，我想在前 10 个帖子的基础上再获得 10 个帖子。截至目前，我得到了我的前 10 个帖子，当我按下加载更多时，我输了我的第一个 10 和第二个 10。我正在使用 redux，所以对我来说有点困惑。我在这里的某个地方读过要concat在我的减速器中使用，但它仍然不起作用。也许我的语法错误？那个帖子是2017年的。

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

  const dispatch = useDispatch();
  const { loading, posts } = useSelector((state) => state.posts);

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

  return (
    <Container className="mt-4" style={{ maxWidth: "600px" }}>
      {loading ? (
        <Loader />
      ) : (
        <>
          {posts.map((post) => (
            <Col key={post._id} className="m-2 p-2">
              <Post post={post} />
            </Col>
          ))}
          <Button onClick={() => setPage(page + 1)}>Load More</Button>
        </>
      )}
    </Container>
  );
};

我的减速机

export const postsReducer = (state = { posts: [] }, action) => {
  switch (action.type) {
    case PC.FETCH_ALL_POSTS_REQUEST:
      return { loading: true, posts: [] };
    case PC.FETCH_ALL_POSTS_SUCCESS:
      return {
        loading: false,
        posts: state.posts.concat(action.payload),
      };
    case PC.FETCH_ALL_POSTS_FAIL:
      return { loading: false, error: action.payload };

标签： reactjsreduxpaginationinfinite-scroll

解决方案

我的假设是，在您的getPosts操作中，您似乎正在调度PC.FETCH_ALL_POSTS_REQUEST最初将 post 设置为空数组。您可能希望将其更改为只是return { loading: true }不将 post 设置为[]. 所以你的减速器看起来像这样

export const postsReducer = (state = { posts: [] }, action) => {
  switch (action.type) {
    case PC.FETCH_ALL_POSTS_REQUEST:
      return { loading: true };
    case PC.FETCH_ALL_POSTS_SUCCESS:
      return {
        loading: false,
        posts: [...state.posts, ...action.payload],
      };
    case PC.FETCH_ALL_POSTS_FAIL:
      return { loading: false, error: action.payload };

此外，您可能需要确认 redux 存储在新的 post fetch 上没有被清除可能 d

推荐阅读