Question

我正在尝试实现一个逻辑来显示从简单的REST API获取的一些数据。所以我在 RanjoorExplore 类中抓取JSON对象，并将数据发送到数据到另一个类中的 ExploreCard 。所以 this.props.data 必须引用传递的变量。通过映射该变量，我在一个简单的文本组件中显示响应对象的title属性。我正面临这个错误：

undefined不是一个函数（评估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>
            );
        }
    }

有人可以帮我解决这个问题吗？提前谢谢。

Answer 1

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

也许您打算使用map？返回一个数组

React Native：Undefined不是一个函数（评估this.props ......）

1 个答案: