我如何检查渲染中元素是否为空（React Native）

Question

我有一个文件 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 为空，则不显示图像。

这是错误：

Answer 1

当你在 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>

Answer 2

你也可以使用快捷方式：

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

我如何检查渲染中元素是否为空（React Native）

How I can to check in the render that an element is empty (React Native)

json

render

react-native