React-Native:解析JSON时出现类型错误

我正在尝试实现一个新闻应用程序。它应该显示一个新闻标题列表，从缩略图和描述开始，然后单击，url应该在浏览器中打开。但是，我在半路上遇到了一个类型错误

以下是我的新闻列表和新闻详细信息文件的代码

NewsList.js

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import NewsDetail from './NewsDetail';

class NewsList extends Component {
    constructor(props) {
        super(props);

        this.state = {
          news: []
        };
    }
    //state = {news: []};
    componentWillMount() {
        axios.get('https://newsapi.org/v2/top-headlines?country=in&apiKey=MYAPIKEY')
        .then(response => this.setState({news: response.data }));
    }

    renderNews() {
        return this.state.news.map(newsData => 
        <NewsDetail key={newsData.title} newsData={newsData} />
     );

    }

    render() {
        console.log("something",this.state);
    return (
        <ScrollView>
            {this.renderNews()}
        </ScrollView>

    );
    }
}

export default NewsList;

import React，{Component}来自'React'；
从“react native”导入{ScrollView}；
从“axios”导入axios；
从“/NewsDetail”导入NewsDetail；
类NewsList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
新闻：[]
};
}
//state={news:[]}；
组件willmount（）{
axios.get（）https://newsapi.org/v2/top-headlines?country=in&apiKey=MYAPIKEY')
.then（response=>this.setState（{news:response.data}））；
}
renderNews（）{
返回this.state.news.map（newsData=>
);
}
render（）{
log（“something”，this.state）；
返回(
{this.renderNews（）}
);
}
}
导出默认新闻列表；

NewsDetail.js

import React from 'react';
import { Text, View, Image, Linking } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
import Button from './Button';
import NewsList from './NewsList';

const NewsDetail =({ newsData }) => {
    const { title, description, thumbnail_image, urlToImage, url } = newsData;
    const { thumbnailStyle, 
        headerContentStyle,
        thumbnailContainerStyle,
        headerTextStyle,
        imageStyle } =styles;
 return(
     <Card>

         <CardSection>
             <View>
                 <Image 
                 style={thumbnailStyle}
                 source={{uri: urlToImage}}
                 />
             </View>
             <View style={headerContentStyle}>
                 <Text style={headerTextStyle}>{title}</Text>
                 <Text>{description}</Text>
             </View>
         </CardSection>

         <CardSection>
             <Image
             style={imageStyle} 
             source={{uri:urlToImage}}
              />
         </CardSection>

         <CardSection>
             <Button onPress={() =>Linking.openURL(url)} >
             ReadMore
             </Button>
         </CardSection>

     </Card>
 );
};



export default NewsDetail;

从“React”导入React；
从“react native”导入{文本、视图、图像、链接}；
从“./卡”导入卡；
从“./CardSection”导入CardSection；
从“./按钮”导入按钮；
从“/NewsList”导入新闻列表；
const newsdail=（{newsData}）=>{
const{title，description，thumbnail_image，urlToImage，url}=newsData；
const{thumbnailStyle，
headerContentStyle，
thumbnailContainerStyle，
头饰风格，
imageStyle}=样式；
返回(
{title}
{说明}
Linking.openURL（url）}>
里德莫尔
);
};
导出默认新闻细节；

我得到的错误的跟踪

TypeError:this.state.news.map不是函数

此错误位于： 在新闻列表中（在App.js:11） 在RCTView中（见View.js:78） 在视图中（位于App.js:9） 应用程序内（位于renderApplication.js:35） 在RCTView中（见View.js:78） 在视图中（位于AppContainer.js:102） 在RCTView中（见View.js:78） 在视图中（位于AppContainer.js:122） 在AppContainer中（位于renderApplication.js:34）NewsList.renderNews NewsList.js:21:31 NewsList.proxiedMethod createPrototypeProxy.js:44:29 NewsList.render NewsList.js:31:18 NewsList.proxiedMethod createPrototypeProxy.js:44:29 finishClassComponent ReactNativeRenderer-dev.js:8707:30 updateClassComponent ReactNativeRenderer-dev.js:8674:11开始工作 ReactNativeRenderer-dev.js:9375:15执行工作 ReactNativeRenderer-dev.js:11771:15 workLoop ReactNativeRenderer-dev.js:11839:25 Object.invokeGuardedCallback ReactNativeRenderer-dev.js:39:9

App.js

import React from 'react';
import { AppRegistry, View } from 'react-native';
import Header from './header';
import NewsList from './NewsList';

//create component
const App = () => {
    return(
    <View style={{ flex:0 }}>
        <Header headerText={'Headlines'} />
        <NewsList />
    </View>);
}

export default App;
AppRegistry.registerComponent('news', () => App);

从“React”导入React；
从“react native”导入{AppRegistry，View}；
从“./头”导入头；
从“/NewsList”导入新闻列表；
//创建组件
常量应用=（）=>{
返回(
);
}
导出默认应用程序；
AppRegistry.registerComponent（'news'，（）=>App）；

您实际上可以在浏览器中转到“MY_API_KEY”，或者使用类似于

curl

或Postman的工具来检查响应是什么。数据响应是一个对象，但您需要一个数组

articles

很可能是您想要的财产

您可能还需要检查这是否是一个数组，并适当更新显示的内容

.then(response => {
  const news = response.data.articles;
  if (Array.isArray(news)) {
    this.setState({ news });
  } else {
    this.setState({ errorMessage: 'Could not load any articles' });
  }
});

实际上，您可以在浏览器中转到“MY_API_KEY”，或者使用类似于

curl

或Postman的工具来检查响应是什么。数据响应是一个对象，但您需要一个数组

articles

很可能是您想要的财产

您可能还需要检查这是否是一个数组，并适当更新显示的内容

.then(response => {
  const news = response.data.articles;
  if (Array.isArray(news)) {
    this.setState({ news });
  } else {
    this.setState({ errorMessage: 'Could not load any articles' });
  }
});

---

您得到的错误-

类型错误：this.state.news.map不是函数

，表示新闻不是数组。
通过检查api响应，您应该执行以下操作：

---

this.setState（{news:response.data.articles}）

您得到的错误-

TypeError:this.state.news.map不是函数

，表示新闻不是数组。
通过检查api响应，您应该执行以下操作：

this.setState（{news:response.data.articles}）