首页 文章

React-Native：解析JSON时键入Error

提问于
浏览 次
0

我正在尝试实施新闻应用程序 . 它应该在缩略图图像和描述开始时显示新闻 Headers 列表，然后点击该URL应该在浏览器中打开 . 但是，我被困在中途获得类型错误 .

以下是我的NewsList和NewsDetail文件的代码 .

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;

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;

StackTrace的错误我得到了

TypeError：this.state.news.map不是函数此错误位于：在视图中的RCTView（在View.js：78）的NewsList（在App.js：11）中（在App.js：9）在视图中的RCTView（在View.js：102）的RCTView（在View.js：102）中的应用程序（在renderApplication.js：35中）（在View.js：102中）（在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 beginWork ReactNativeRenderer-dev.js：9375：15 performUnitOfWork 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);
json react-native axios

2 回答

  • 2

    你得到的错误 - TypeError: this.state.news.map is not a function ，意味着新闻不是数组 .
    通过检查您的api响应，您应该：
    this.setState({news: response.data.articles }) .

    回复于
  • 1

    您实际上可以在浏览器中转到https://newsapi.org/v2/top-headlines?country=in&apiKey= "MY_API_KEY"或使用 curl 或Postman之类的工具来检查响应是什么 . 数据响应是一个对象，但您需要一个数组 . articles 很可能是你追求的 property .

    您可能还想检查这是一个数组并更新正确显示的内容 .

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

相关问题