javascript - 创建一个“加载更多”按钮，以增加从 API 获取的可见文章的数量

Question

我刚刚开始学习 react ，现在我陷入困境，希望得到你的帮助。

我目前正在尝试限制来自新闻 API 的数据，并添加一个加载更多按钮来加载更多数据。

我在这里找到了一个很好的示例，但我无法设法使其适应我的代码。

示例:codepen.io

希望你能帮助我。

我的代码:

class App extends React.Component {
  state = {
    articles: [],
    isLoading: true,
    errors: null,
    visible: 2
  };

  loadMore() {
    this.setState(prev => {
      return { visible: prev.visible + 4 };
    });
  }

  getArticles() {
    axios
      .get(
        "https://newsapi.org/v2/everything?q=ai&pageSize=100&sortBy=popularity&apiKey=API_KEY"
      )
      .then(response =>
        response.data.articles.map(article => ({
          date: `${article.publishedAt}`,
          title: `${article.title}`,
          url: `${article.url}`
        }))
      )
      .then(articles => {
        this.setState({
          articles,
          isLoading: false
        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

  componentDidMount() {
    this.getArticles();
  }

  render() {
    const { isLoading, articles, visible } = this.state;
    return (
      <React.Fragment>
        <H1>#AI</H1>
        <div>
          {!isLoading ? (
            articles.map(article => {
              const { date, title, url } = article;

              return (
                <Div key={url}>
                  <Div inner>
                    <P>{moment.utc(date).format("YYYY-MM-DD")}</P>
                    <A href={url}>{title}</A>
                  </Div>
                </Div>
              );
            })
          ) : (
            <Div loader />
          )}
        </div>
        {this.state.visible < this.state.articles.length && (
          <Button onClick={this.loadMore}>Load more</Button>
        )}
      </React.Fragment>
    );
  }
}
export default App;

Answer 1

缺少的是您在映射之前没有将可见计数应用于项目

{articles.slice(0, visible).map((article, index) => {
     const { date, title, url } = article;
     return (
       <Div key={url}>
           <Div inner>
                <P>{moment.utc(date).format("YYYY-MM-DD")}</P>
                <A href={url}>{title}</A>
           </Div>
        </Div>
     );
})}