React не отображает весь мой массив из состояния - PullRequest
Новая
       35

React не отображает весь мой массив из состояния

0 голосов
/ 13 апреля 2020

Я пытаюсь создать программу чтения новостей для личных целей (и на практике то, что я узнал), и у меня возникают проблемы со списком моих статей, которые я загружаю с главной страницы NewsApi и Reddit. У меня нет API, потому что я думаю, что было бы бесполезно создавать его только для получения статей, и я не храню их, так что все это в моем приложении React.

Вот код: 

componentDidMount() {
let posts = [];

fetch(`https://www.reddit.com/r/all.json`)
.then(resp => resp.json())
.then(redditAllPosts => {
  redditAllPosts.data.children.map((redditSinglePost) => {
    const { author, title, subreddit, permalink, created_utc } = redditSinglePost.data;
    let redditPost = {
      'sourcePost': 'Reddit',
      'date': created_utc,
      'title': title,
      'author': author,
      'url': `https://www.reddit.com${permalink}`,
      'subredditUrl': `https://www.reddit.com/r/${subreddit}`,
    };
    posts.push(redditPost);
  })
})

fetch(`https://newsapi.org/v2/top-headlines?country=us&apiKey=${process.env.REACT_APP_API_KEY}`)
.then(resp => resp.json())
.then(newsApiPosts => {
  newsApiPosts.articles.map((newsApiSinglePost) => {
    const dateNewsApiPost = moment(newsApiSinglePost.publishedAt).unix();
    const { author, title, url } = newsApiSinglePost;
    let newsApiPost = {
      'sourcePost': 'NewsApi',
      'date': dateNewsApiPost,
      'title': title,
      'author': author,
      'url': url,
      'sourceNews': newsApiSinglePost.source.name
    };
    posts.push(newsApiPost);
  })
  return posts;
})
.then(posts => {
  this.setState({posts})
})
}

constructor() {
 super()
 this.state = {
   posts: null,
   filtersTheme: null, ( will be implemented later )
   filtersCountry: null ( will be implemented later )
 }
}

Так что, как правило, когда приложение монтируется, оно извлекает сообщения из Reddit, сопоставляет то, что было извлечено, и толкает статью, отформатированную в массив сообщений, и он делает то же самое с сообщениями NewsAPI. Как только это будет сделано, программа устанавливает состояние, которое я пытался утешить, записывая почти все на каждом этапе. Он регистрирует полный массив с 20 сообщениями NewsAPI и 45 сообщениями Reddit, но отображает только первые 20 сообщений массива. Заключительная строка журналов выглядит следующим образом:

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {… }]

Откуда это могло взяться?

1 Ответ

0 голосов
/ 13 апреля 2020

Используйте это вместо: 

this.setState(prevState => ({ posts: [...prevState.posts, ...posts] })

Таким образом, вы только добавляете сообщения в состояние, а не перезаписываете их.

...