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

【问题标题】：How I can to check in the render that an element is empty (React Native)我如何在渲染中检查元素是否为空（React Native）
【发布时间】：2020-05-11 06:45:46
【问题描述】：

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

这是错误：

【问题讨论】：

你的最后一个问题没有任何意义。你能用翻译器或小句来帮助我们理解吗？另外...尝试先阅读此内容...stackoverflow.com/questions/154059/…

标签： json react-native render

【解决方案1】：

你也可以使用快捷方式：

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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的帮助，刚刚进行了更改并且工作正常。现在更正你的答案。这是条件中的正确验证 - if: item.better_featured_image