ios - 在 React Native 中隐藏/显示基于服务/动态地来自 json 的标签 <Text>

Question

下面是我的JSON，

"[{"id":32156465,"b_name":"KFC","website":"kfc.com","category":[]},{"id":87985645,"b_name":"Pizza Hut","website":"pizzahut.com","category":[{"id":"357","title":"Pizza"}]},{"id":78956465,"b_name":"Mc Donalds","website":"mcdonalds.com","category":[{"id":"951","title":"Burger"}]},{"id":32136556,"b_name":"Eagle Boys Pizza","website":null,"category":[]}]"

需要迭代类别数组，如果存在任何对象，那么我需要获取标题并显示为:

Category: Testing 

否则不应显示“类别:”文本。

这就是我试过的全部代码

export default class App extends Component<Props> {

      constructor(props) {
        super(props)
        this.state = { showCategoryList: false }
      }

      categoriesList(categoriesObject) {
        var categoriesListStr = ""
        categoriesObject.map((categoryDict) => {
          Object.keys(categoryDict).map(function (key, value) {
            console.log("Key- " + key + "Value-" + value)
            if ((key == "title") && (categoryDict[key] !== null)) {
              categoriesListStr = categoryDict[key]
            }
          })
        })
        return categoriesListStr
      }

      _renderItem = ({ item, section }) => {
        return (
          <View style={styles.rowViewContainer1}>
            <Text style={{fontSize: 12, fontWeight: "normal", marginLeft: 10}}>{'Business Name: ' + item.b_name}</Text>
            <Text style={{fontSize: 12, fontWeight: "normal", marginLeft: 10}}>{'Website: ' + item.website}</Text>
            <Text style={{fontSize: 12, fontWeight: "normal", marginLeft: 10}}>{'Category: ' + this.categoriesList(item.category)}</Text>
            {/* here, if categoriesListStr returns empty string, then we should not display"Category: ", how can i achieve this */}
            <View style={styles.lineViewSeparation} />
          </View>
        )
      };

      _renderSectionHeader = ({ section }) => {
        return (
          <View style={styles.sectionHeader}>
            <Text style={styles.header}>{section.key}</Text>
          </View>
        )
      }
      render() {
        var prospectsDataArr = [{"id":32156465,"b_name":"KFC","website":"kfc.com","category":[]},{"id":87985645,"b_name":"Pizza Hut","website":"pizzahut.com","category":[{"id":"357","title":"Pizza"}]},{"id":78956465,"b_name":"Mc Donalds","website":"mcdonalds.com","category":[{"id":"951","title":"Burger"}]},{"id":32136556,"b_name":"Eagle Boys Pizza","website":null,"category":[]}]
        var prospectsDict = { key: 'New', data: prospectsDataArr }
        dataSourceArr = [prospectsDict]
        console.log("renderedItem " + this._renderItem)
        return (
          <View style={{ marginTop: (Platform.OS) == 'ios' ? 20 : 0 }}>
            <SectionList style={styles.cellView}
              sections={dataSourceArr}
              renderItem={this._renderItem}
              renderSectionHeader={this._renderSectionHeader}
              keyExtractor={(item, index) => index}
            />
          </View>
        );
      }
    }

这里，如果 categoriesListStr 返回空字符串，那么我们不应该显示“Category:”，我该如何实现这一点

Answer 1

替换以下内容:

<Text> 
  {'Category: ' + this.categoriesList(item.category)}
</Text>

有了这个:

{
item.category.length > 0 && <Text>{'Category: ' + this.categoriesList(item.category)}</Text>
}

补充说明:

你的 categoriesList函数仅返回一个类别标题。如果你要有最大。 category 中只有一个对象数组，或者您可以返回任何一个标题，那么您可能不需要 categoriesList功能，你可以使用

{'Category: ' + item.category[0].title}

返回第一个标题(如果找到)代替

{'Category: ' + this.categoriesList(item.category)}</Text>}