Нарушение Инварианта - Условный рендеринг

Question

Это сводит меня с ума, и я не могу определить проблему. Я пытаюсь условно визуализировать компонент изображения, но он выбрасывает Invariant Violation: Text strings must be rendered within a <Text> component. Даже не используя текстовую строку, где это утверждение.

render() {
    return (
        <View style={newsItemStyles.wrapper}>
            {this.state.isLoading && (
                <View style={loadingOverlayStyles.container}>
                    <ActivityIndicator />
                    <StatusBar barStyle="default" />
                </View>
            )}
            {this.props.item.uri && ( // this is there the error is thrown
                <View>
                    <Image
                        style={{width: '100%', height: 250}}
                        source={{uri: this.props.item.uri}}
                    />
                </View>
            )}
            <TouchableHighlight
              onPress={() =>
                this.props.navigation.navigate('NewsSingle', {
                  item: this.props.item,
                  title: this.props.item.title,
                  favorite: this.props.favorite,
                })
              }>
              <Text numberOfLines={2}>{this.props.item.title}</Text>
            </TouchableHighlight>
            {this.props.favorite ? (
                <TouchableOpacity activeOpacity={0.5} onPress={this.unfavorite}>
                    <FontAwesome5 name="bookmark" size={18} solid />
                </TouchableOpacity>
            ) : (
                <TouchableOpacity activeOpacity={0.5} onPress={this.favorite}>
                    <FontAwesome5 name="bookmark" size={18} />
                </TouchableOpacity>
            )}
        </View>
    );
}

Answer 1

Ошибка проста. Вы должны быть осторожны при рендеринге таких компонентов, как:

someCondition && <someComponent />

Поскольку есть некоторые значения, которые JSX будет отображать как текст. Пример этого, 0, это ложное значение, которое JSX не будет отображать как логическое значение.

Чтобы исправить это, вам просто нужно использовать оператор двойного отрицания, чтобы получить соответствующее логическое значение, как :

            {!!this.props.item.uri && ( // error won't throw
                <View>
                    <Image
                        style={{width: '100%', height: 250}}
                        source={{uri: this.props.item.uri}}
                    />
                </View>
            )}

Answer 2

Я буду модульным, и проблема должна быть решена, в противном случае дайте мне знать:

returnImage = () => (<View>
                        <Image
                            style={{width: '100%', height: 250}}
                            source={{uri: this.props.item.uri}}
                        />
                    </View>)


displayImage = () => {
let renderData = this.props.item.uri ? this.returnImage():null


}

    render() {
        return (
            <View style={newsItemStyles.wrapper}>
                {this.state.isLoading && (
                    <View style={loadingOverlayStyles.container}>
                        <ActivityIndicator />
                        <StatusBar barStyle="default" />
                    </View>
                )}
                {}
                <TouchableHighlight
                  onPress={() =>
                    this.props.navigation.navigate('NewsSingle', {
                      item: this.props.item,
                      title: this.props.item.title,
                      favorite: this.props.favorite,
                    })
                  }>
                  <Text numberOfLines={2}>{this.props.item.title}</Text>
                </TouchableHighlight>
                {this.props.favorite ? (
                    <TouchableOpacity activeOpacity={0.5} onPress={this.unfavorite}>
                        <FontAwesome5 name="bookmark" size={18} solid />
                    </TouchableOpacity>
                ) : (
                    <TouchableOpacity activeOpacity={0.5} onPress={this.favorite}>
                        <FontAwesome5 name="bookmark" size={18} />
                    </TouchableOpacity>
                )}
            </View>
        );
    }

надеюсь, это поможет