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

嗨，我正在尝试制作一个简单的新闻应用程序来学习反应。不断地出现我不理解的错误。为什么应用程序与json占位符api配合良好。但是现在它显示的错误props.stories.map不是一个函数

这是我的密码

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>
)

从“/components/NewsList”导入新闻列表；
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
故事：[]，
}
}
componentDidMount（）{
取回(`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
返回(
);
}
}
从“./Story”导入故事
从“样式化组件”导入样式化
const NewsList=道具=>{
返回(
{
道具.故事.地图（故事=>(
)
)
}
)
}
从“React”导入React；
从“样式化组件”导入样式化；
导出常量故事=道具=>(
{props.story.title}
{道具.故事.作者}

{道具.故事.文章}

)

我有console.log api响应，数据接收良好。这只是当我使用另一个api响应时。 我已经为这篇文章隐藏了我的api_密钥，所以这不是问题

谢谢你的建议。

试试这个

 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>
)

从“/components/NewsList”导入新闻列表；
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
故事：[]，
storiesData:[]
}
}
componentDidMount（）{
取回(`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
返回(
);
}
}
从“./Story”导入故事
从“样式化组件”导入样式化
const NewsList=道具=>{
console.log（道具、故事）；
this.setState（{storiesData:props.stories}）；
返回(
{
this.state.storiesData.map（故事=>(
)
)
}
)
}
从“React”导入React；
从“样式化组件”导入样式化；
导出常量故事=道具=>(
{props.story.title}
{道具.故事.作者}

{道具.故事.文章}

)

试试这个

 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>
)

从“/components/NewsList”导入新闻列表；
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
故事：[]，
storiesData:[]
}
}
componentDidMount（）{
取回(`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
返回(
);
}
}
从“./Story”导入故事
从“样式化组件”导入样式化
const NewsList=道具=>{
console.log（道具、故事）；
this.setState（{storiesData:props.stories}）；
返回(
{
this.state.storiesData.map（故事=>(
)
)
}
)
}
从“React”导入React；
从“样式化组件”导入样式化；
导出常量故事=道具=>(
{props.story.title}
{道具.故事.作者}

{道具.故事.文章}

)

在新的API文档（）中，您可以看到您的请求返回表单的对象

{
  status: string
  totalResults: number
  articles: Array
}

因此，您需要设置为故事，而不是

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}))
      )

在新的API文档（）中，您可以看到您的请求返回表单的对象

{
  status: string
  totalResults: number
  articles: Array
}

因此，您需要设置为故事，而不是

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}))
      )

---

此错误通常意味着您尝试迭代的数据不是数组。你确定这是一个数组吗？你的代码看起来不错！检查您的

数据是否为数组！因为它看起来可能是一个
对象
（好像你在说你正在接收数据）。因此，请检查其属性，如
data.stories
或来自请求的任何内容。此错误通常表示您尝试迭代的数据不是数组。你确定这是一个数组吗？你的代码看起来不错！检查您的
数据是否为数组！因为它看起来可能是一个
对象
（好像你在说你正在接收数据）。所以，检查它的属性，如
data.stories
或来自请求的任何内容。