Question

我正在尝试实施新闻应用。它应该在缩略图图像和描述开始时显示新闻标题列表，然后点击该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不是函数

此错误位于：       在NewsList中（在App.js：11）       在RCTView（在View.js：78）       在视图中（在App.js：9）       在App中（在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 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);

Answer 1

您收到的错误 - TypeError: this.state.news.map is not a function，表示新闻不是数组通过检查你的api响应，你应该这样做：
this.setState({news: response.data.articles })。

Answer 2

您实际上可以转到https://newsapi.org/v2/top-headlines?country=in&apiKey=＆＃34; MY_API_KEY＆＃34;在浏览器中或使用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' });
  }
});

React-Native：解析JSON时键入Error

2 个答案: