Создание кнопки «Загрузить еще», которая увеличивает количество видимых статей, извлеченных из API - PullRequest
Новая
       2

Создание кнопки «Загрузить еще», которая увеличивает количество видимых статей, извлеченных из API

0 голосов
/ 08 марта 2020

Я только начал учиться реагировать, и теперь я застрял и надеюсь на вашу помощь.

В настоящее время я пытаюсь ограничить свои данные из 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;

1 Ответ

1 голос
/ 08 марта 2020

чего не хватает, что вы не применили видимый счетчик к элементам до того, как он отобразился 

{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>
     );
})}
...