Question

在尝试运行程序时，在文件city.js中遇到上述错误。 city.js屏幕应显示从addCity.js屏幕添加的所有城市。

我是本机反应的新手，不确定如何使用道具和正确引用。任何帮助，将不胜感激。谢谢

city.js：

import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    TouchableWithoutFeedback
} from 'react-native';

import { colors } from '../theme'

export default class Cities extends React.Component {
    static navigationOptions = {
        title: 'Cities',
        headerTitleStyle: {
            color: 'white',
            fontSize: 20,
            fontWeight: '400'
        }
    }
    viewCity = () =>{

    }

    render(){

        return (

            <ScrollView>
                        <View>
                        {

                            this.props.screenProps.cities.map((city, index) => (
                                <View>
                                    <TouchableWithoutFeedback onPress={() =>this.viewCity(city)}>
                                        <View style={styles.cityContainer}>
                                        <Text style={styles.city}>{city.city}</Text>
                                        <Text style={style.country}>{city.country}</Text>

                                        </View>

                                    </TouchableWithoutFeedback>

                                </View>
                                ))
                        }
                        </View>
            </ScrollView>

        )
    }
}

const styles = StyleSheet.create({
    cityContainer: {
        padding: 10,
        borderBottomWidth: 2,
        borderBottomColor: colors.primary
    }
})

Answer 1

您应该使用loadsh，因为它会处理null或未定义的对象或类似这样的数组

首先安装lodash

npm i lodash

然后像这样使用它

import _ from 'lodash'

const cities = _.get(this.props.screenProps, 'cities.map', [])

if(_.size(cities) > 0){
// do something
}

Lodash是一个值得推荐的JavaScript实用程序库。

React-Native TypeError：未定义不是对象（评估“ this.props.screenProps.cities.map”）

1 个答案: