0

我是 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.
4

2 回答 2

4

您的代码显示了固定数量的博客 (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>
    )
}

我希望它有所帮助。

于 2020-04-11T01:14:21.780 回答
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>
  )
}

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

我使用useCallback它是为了在组件重新渲染时不会创建新函数。

于 2020-04-11T01:14:15.627 回答