Как я могу проверить в рендере, что элемент пуст (React Native) - PullRequest
Новая
       36

Как я могу проверить в рендере, что элемент пуст (React Native)

0 голосов
/ 25 января 2020

У меня есть файл json, но иногда этот файл json не имеет изображения.

Иногда этот элемент пуст: item.better_featured_image.media_details.sizes.medium.source_url 

 render() {
    const { loading, posts } = this.state;
    if (loading) {
      return (
        <View style={styles.container}>
          <Text>Cargando .....</Text>
        </View>
      );
    }
    categorie_title = this.props.navigation.getParam("categorie_name");
    return (
      <View>
        <FlatList
          data={this.state.posts}
          renderItem={({ item }) => (
            <TouchableOpacity
              onPress={() =>
                this.props.navigation.navigate("Noticia", {
                  post_id: item.id,
                })
              }
            >
              <Card>
                <Card.Content>
                  <Title>{item.title.rendered}</Title>
                </Card.Content>                    
                <Card.Cover
                  source={{
                    uri:
                      item.better_featured_image.media_details.sizes.medium
                        .source_url
                  }}
                />
                <Card.Content>
                  <HTML html={item.excerpt.rendered} />
                </Card.Content>
              </Card>
            </TouchableOpacity>
          )}
          keyExtractor={item => item.id.toString()}
        />
      </View>
    );
  }

Мне просто нужно условное выражение - if.

Вопрос был в том, является ли этот компонент item.better_featured_image.media_details.sizes.medium.source_url пусто, не показывать изображение.

Это ошибка: enter image description here

Ответы [ 2 ]

1 голос
/ 25 января 2020

Когда вы находитесь в JSX, не забывайте, что вы все еще находитесь в javascript земле, поэтому просто добавьте условие: 

              <Card>
                <Card.Content>
                  <Title>{item.title.rendered}</Title>
                </Card.Content>        
                {/*if you have data render it else render nothing */}
                {item.better_featured_image ?              
                (<Card.Cover
                  source={{
                    uri:
                      item.better_featured_image.media_details.sizes.medium
                        .source_url
                  }}
                />) : null}
                <Card.Content>
                  <HTML html={item.excerpt.rendered} />
                </Card.Content>
              </Card>
0 голосов
/ 30 января 2020

Также вы можете использовать ярлык: 

{item.better_featured_image && <Card.Cover
  source={{ uri: item.better_featured_image.media_details.sizes.medium.source_url}} />
}
...