Ошибка в устройствах, отличных от iPhoneX - ноль не является объектом

Question

Когда я запускаю свое приложение на симуляторе iPhone X, оно работает без ошибок.

Когда я запускаю его на iPhone 5S, 7 и на всех других устройствах, отличных от iPhone X, я получаюошибка, которая говорит, null is not an object (evaluating '_this.props.filters.map)

Это часть рендеринга моего кода:

render() { 
        return( 
          <View>
            <NativeText 
                color='gray' 
                style={{
                    paddingLeft: '3%', 
                    paddingTop: '2%', 
                    paddingBottom: '2%', 
                    borderBottomColor: 'gray',
                    borderBottomWidth: 1, 
                    fontSize: 14
                }}>Saved Filters</NativeText>
            <View
                style={{
                    borderBottomColor: 'gray',
                    borderBottomWidth: 1,
                }}
            />
            <View style={{flexDirection: 'row', flexWrap: 'wrap', backgroundColor: '#f7fafc'}}>
                {
                    this.props.filters !== null ? this.props.filters.map(
                        (v, i) => {
                            return(
                                <View key={i} style={{flexDirection:'row', alignItems:'center', paddingLeft: '2%'}}>
                                    <NativeText
                                        key={i}
                                        onPress={() => this.updateCurrentFilter(i)}
                                        style={{
                                            paddingLeft: 10,
                                            fontWeight: "100",
                                            fontSize: 14
                                        }}
                                    >{v.filter_name} </NativeText>
                                    <View
                                        style={{
                                            alignSelf: 'flex-end' 
                                        }}
                                    >
                                        <Icon 
                                            name={this.props.checkedFilters !== undefined && this.props.checkedFilters[i] === true ? 'toggle-switch' :  'toggle-switch-off-outline'} 
                                            size={29} 
                                            style={{top: '7%'}}
                                            color='black'
                                            onPress={() => this.updateCurrentFilter(i)}
                                        />
                                    </View>
                                </View>
                            ) 
                        }
                    ) : null
                }
            </View>
            <View
                style={{
                    borderBottomColor: 'gray',
                    borderBottomWidth: 1,
                }}
            />
          </View>
        )
    }

Реквизит исходит отредукторный редуктор с состоянием по умолчанию, равным нулю.

Есть ли что-то специфическое для устройств, отличных от iPhone X, о которых мне следует знать?

Answer 1

Вы получаете ошибку, потому что this.props.filters содержит null значение

попробуйте это:

        <View style={{flexDirection: 'row', flexWrap: 'wrap', backgroundColor: '#f7fafc'}}>
            {
                this.props.filters  ? 
                    this.props.filters.length > 0 ?
                        this.props.filters.map((v, i) => {
                            return(
                                 </View> // your component here
                         )}) 
                     : null
                 : null
            }
        </View>