反应原生：未定义不是一个函数（评估this.props ...）

我想实现一个逻辑来显示一些从简单的REST API获取的数据。所以我抓住了类别中的JSON对象，并将数据发送到数据到另一个类中的ExploreCard。所以this.props.data必须引用传递的变量。通过映射该变量，我在简单的文本组件中显示响应对象的标题属性。我面对这个错误：反应原生：未定义不是一个函数（评估this.props ...）

undefined is not a function(evaluating this.props.data.map).

RanjoorExplore：

import React, { Component } from 'react'; 
    import { 
     StyleSheet, 
     Text, 
     View, 
     Image, 
     ScrollView, 
     Alert 
    } from 'react-native'; 
    import Icon from 'react-native-vector-icons/FontAwesome'; 
    import ExploreCard from '../../elements/cards/ExploreCard'; 
    import ExploreHeader from '../../elements/headers/ExploreHeader'; 

    class RanjoorExplore extends Component { 

     constructor(){ 
      super(); 
      this.state = { 
       rawData: [] 
      } 
     } 

     static navigationOptions = { 
      header: null, 
      title: 'Explore', 
      tabBarIcon: ({ tintColor, focused }) => (
       <Icon 
        name="bandcamp" 
        size={24} 
        color={focused ? '#4ab367' : 'white'} 
       /> 
      ), 
      headerStyle: { backgroundColor: '#202026' }, 
      headerTitleStyle: { 
       color: 'white' 
      } 
     }; 

     fetchGanjoorData() { 
      return fetch('https://jsonplaceholder.typicode.com/posts/1') 
       .then((response) => response.json()) 
       .then((responseJson) => { 
        this.setState({rawData: responseJson}) 
       }) 
       .catch((error) => { 
        console.error(error); 
       }); 
     } 

     componentDidMount() { 
      this.fetchGanjoorData(); 
     } 

     render() { 
      return (
       <View style={styles.ExploreContainer}> 
        <ExploreHeader /> 
        <ScrollView>    
         <ExploreCard data={this.state.rawData} /> 
        </ScrollView> 
       </View> 
      ); 
     } 
    } 

    var styles = StyleSheet.create({ 
     ExploreContainer: { 
      backgroundColor: '#303036', 
      height: '100%', 
      width: '100%' 
     }, 
    }) 
    export default RanjoorExplore

ExploreCard：

import React, { Component } from 'react'; 
    import { 
     StyleSheet, 
     Text, 
     View, 
     Image, 
     Alert 
    } from 'react-native'; 
    import { Card, ListItem, Button, Icon, Avatar } from 'react-native-elements'; 

    export default class ExploreCard extends Component { 
     render() { 
      /* Mapped data will be processed right here */ 
      let mappedData = this.props.data.map(function (data1) { 
       return (
        <View> 
         {data1.title} 
        </View> 

       ) 
      }) 

      return (
       <View style={{ flexDirection: 'row' }}> 
        <View style={{ flex: 1 }}></View> 
        <Card 
         containerStyle={{ 
          width: '85%', height: 250, backgroundColor: '#202026', shadowOpacity: 0.7, 
          shadowOffset: { height: 5 }, shadowColor: 'black', borderWidth: 0, borderRadius: 8, flexDirection: 'row' 
         }} 
         wrapperStyle={{ alignSelf: 'flex-end' }} > 

         <View style={{ flex: 2, alignSelf: 'flex-end' }}> 
          <View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}> 
           <Text style={{ fontFamily: 'IRANSans', marginRight: 5, marginTop: 12, color: '#505056' }}>حافظ</Text> 
           <Avatar 
            medium 
            rounded 
            source={require('../../img/avatars/ferdowsi.jpg')} 
            containerStyle={{ 
             alignSelf: 'flex-end', marginRight: 15, 
             shadowOpacity: 0.7, 
             shadowOffset: { height: 5 }, shadowColor: 'black' 
            }} 
           /> 
          </View> 

          <View> 
           <Text style={{ alignSelf: 'flex-end', fontFamily: 'IRANSans', color: 'white', marginTop: '10%', marginRight: '5%' }}> 
            {mappedData} 
           </Text> 
           <Text style={{ alignSelf: 'flex-start', fontFamily: 'IRANSans', color: 'white' }}> 
            تا دمی برآساییم زین حجاب ظلمانی 
          </Text> 
          </View> 
         </View> 
         <View style={{ alignSelf: 'flex-end', backgroundColor: 'transparent', flexDirection: 'row' }}> 
          <Icon 
           name='favorite' size={24} color="#34343a" style={{ marginLeft: 5 }} 
          /> 
          <Icon 
           name='grade' size={24} color="#34343a" style={{ marginLeft: 5 }} 
          /> 
          <View> 
           <Button 
            textStyle={{ fontSize: 15 }} 
            iconRight 
            backgroundColor='#4ab367' 
            fontFamily='IRANSans_UltraLight' 
            buttonStyle={{ 
             height: 15, width: 110, 
             borderRadius: 8 
            }} 
            title='ادامه مطلب' 
           /> 

          </View> 

         </View> 
        </Card> 
        <View style={{ flex: 1 }}></View> 
       </View> 
      ); 
     } 
    }

是否有人可以帮我解决这个问题？在此先感谢。

来源

2017-07-14 aligholamee

你应该添加条件的数据不要空白，然后再调用它的地图 –

我的猜测是'responseJson'不是一个像你认为它是 –

@GarrettMcCullough是对的，但我认为结构的map函数与for循环类似。它仅在需要的情况下遍历1个对象。我发现响应必须是数组而不是对象。不管怎么说，还是要谢谢你。 – aligholamee

https://jsonplaceholder.typicode.com/posts/1返回一个对象，而不是一个数组。因此，map不是有效的操作

也许你打算使用https://jsonplaceholder.typicode.com/posts/？这返回一个数组

来源

2017-07-14 18:38:33

反应原生：未定义不是一个函数（评估this.props ...）

回答

相关问题