使用加载更多按钮加载组件动态反应 Js

Question

我是 React Js 的新手，所以我自己找不到解决问题的方法，请帮助我。

我在一个有博客页面的网站上工作，博客应该在页面上动态显示。当页面加载时，我希望它有 4 个博客，下面会有一个按钮，所以当用户单击它时，React 应该呈现并显示其余的博客。

到目前为止，我的代码如下所示：

import { blogs} from "./blogs";

import { Blog} from "./Blog";


function BlogList() {
    const cardComponent = blogs.slice(0,6).map((blog, i) => {
        return (
            <Blog
                key={i}
                id={blogs[i].id}
                img={blogs[i].img.src}
                date={blogs[i].date}
                title={blogs[i].title}
                img2={blogs[i].img2.src}
                logoTitle={blogs[i].logoTitle}
                text={blogs[i].text}
            />
        );
    });

    return (
    <div>{cardComponent}</div>

)
}`````

**This code lets me display 6 blogs when the page is loaded, what I want to do is add "Load More" button under these already loaded 6 blogs, when the user clicks the button it should render and display another 4 blogs from "blogs", and again have Load More button.** Any help will be greatly appreciated,

Thank you.

Answer 1

你可以这样做：

function BlogList() {

  const [maxRange, setMaxRange] = useState(6); 

  const loadMore = useCallback(() => {
    setMaxRange(prevRange => prevRange + 4);
  },[])

  const cardComponent = blogs.slice(0, maxRange).map((blog, i) => {
    return (
      <Blog
        key={i}
        id={blogs[i].id}
        img={blogs[i].img.src}
        date={blogs[i].date}
        title={blogs[i].title}
        img2={blogs[i].img2.src}
        logoTitle={blogs[i].logoTitle}
        text={blogs[i].text}
      />
    );
  });

  return (
    <div>
      {cardComponent}
      <button onClick={loadMore}>Load More</button>
    </div>
  )
}

因此，您可以在 state 中保持当前显示的最大数量 Blog 并在单击按钮时增加它。

我使用 useCallback 以便在组件重新呈现时不会创建新函数。

Answer 2

您的代码显示固定数量的博客 (6)。您无需对可见博客的数量进行硬编码，而是需要将其存储在一个您可以稍后更改的变量中。为此，我们将使用 useState。您还需要根据按下按钮更改帖子数量，因此还需要一个按钮和一个操作。

function BlogList() {
    // Starting number of visible blogs
    const [visibleBlogs, setVisibleBlogs] = useState(6)

    // Set the visible blogs to the current amount + 4
    // eg. if there are 10 visible post, clicking again will show 14.
    const handleClick = () => {
        setVisibleBlogs(prevVisibleBlogs => prevVisibleBlogs + 4)
    }

    const cardComponent = blogs.slice(0, visibleBlogs).map((blog, i) => {
        return (
            <Blog
                key={i}
                id={blogs[i].id}
                img={blogs[i].img.src}
                date={blogs[i].date}
                title={blogs[i].title}
                img2={blogs[i].img2.src}
                logoTitle={blogs[i].logoTitle}
                text={blogs[i].text}
            />
        );
    });

    return (
        <div>
            {cardComponent}
            <button type="button" onClick={handleClick}>
                See more
            </button>
        </div>
    )
}

希望对您有所帮助。

使用加载更多按钮加载组件动态反应 Js

Load Components Dynamically React Js with load more button

reactjs

use-state