props.stories.map不是一个函数吗？

Question

嗨，我想做一个简单的新闻应用来学习react。不断得到一个我不理解的错误。为什么应用程序使用json占位符api工作得很好。但是，现在它显示了错误props.stories.map is not a function。

这是我的代码。

import NewsList from './components/NewsList';

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      stories: [],
    }
  }

componentDidMount() {
  fetch(`https://newsapi.org/v2/top-headlines?country=gb&apiKey=${API_KEY}`)
      .then(res => res.json() 
      .then(data => this.setState({stories: data}))
      )
}

  render(){
    const { stories } = this.state
    return (
      <div className="App">
       <NewsList stories={stories} />
      </div>
    );
    }

  }


import Story from './Story'

import styled from 'styled-components'

const NewsList = props => {
   return(
       <NewsListWrapper>
        {
            props.stories.map(story => (
                <Story story={story} />
            )
          )
        }
       </NewsListWrapper>
   )
}







import React from 'react';

import styled from 'styled-components';

export const Story = props => (
    <StoryWrapper>
        <h2>{props.story.title}</h2>
        <p>{props.story.author}</p>
        <p>{props.story.articles}</p>
    </StoryWrapper>
)

我有console.log的api响应和数据是正常接收的。这很简单，当我使用另一个api响应时。我只是为了这篇文章而隐藏了我的api_key，所以这不是问题。

谢谢你的建议。

Answer 1

在新的应用程序接口文档(https://newsapi.org/docs/endpoints/top-headlines)中，您可以看到请求返回的对象为

{
  status: string
  totalResults: number
  articles: Array
}

因此您需要设置为stories而不是data，而是data.articles

fetch(`https://newsapi.org/v2/top-headlines?country=gb&apiKey=${API_KEY}`)
      .then(res => res.json() 
      .then(data => this.setState({stories: data.articles}))
      )

Answer 2

尝尝这个,

 import NewsList from './components/NewsList';

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      stories: [],
      storiesData:[]
    }
  }

componentDidMount() {
  fetch(`https://newsapi.org/v2/top-headlines?country=gb&apiKey=${API_KEY}`)
      .then(res => res.json() 
      .then(data => this.setState({stories: data}))
      )
}

  render(){
    const { stories } = this.state
    return (
      <div className="App">
       <NewsList stories={stories} />
      </div>
    );
    }

  }


import Story from './Story'

import styled from 'styled-components'

const NewsList = props => {
   console.log(props.stories);
   this.setState({storiesData:props.stories});
   return(
       <NewsListWrapper>
        {
            this.state.storiesData.map(story => (
                <Story story={story} />
            )
          )
        }
       </NewsListWrapper>
   )
}







import React from 'react';

import styled from 'styled-components';

export const Story = props => (
    <StoryWrapper>
        <h2>{props.story.title}</h2>
        <p>{props.story.author}</p>
        <p>{props.story.articles}</p>
    </StoryWrapper>
)