React / React Native：如何映射数组并在卡片上显示数据

Posted 2023-02-16

【中文标题】React / React Native：如何映射数组并在卡片上显示数据

【英文标题】：React / React Native: How to Map over array and show Data on Cards

【发布时间】：2022-01-13 17:59:49

【问题描述】：

我试图 .map() 覆盖我的数组并将卡片渲染到 dom。我可以在卡上显示第二个对象中的所有内容，但无法在卡上显示 source.name ("Engadget")。

我猜是因为它是对象内部的对象？

那么如何迭代“源”对象以及如何在我的卡片上进行迭代？

数据示例

"articles": [
-
  -"source": 
   "id": "engadget",
   "name": "Engadget"
 ,

"author": "Igor Bonifacic",
"title": "Apple Wallet’s hotel keycard support is now live, starting at Hyatt hotels",
"urlToImage": "https://s.yimg.com/os/creatr-uploaded-images/2021-12/5d0536d0-5855-11ec-bbe4-0bcb4305d433",

  
]

工作卡示例

dataArray.map((newsStory)=> 
    const   url, urlToImage, title = newsStory
    
      return (
         <>
        <Card style=styles.card onPress=()=> Linking.openURL(url)>
            <Card.Cover source= uri: urlToImage  />
//trying to show source in this 'Text'
            <Text style=styles.source>source?</Text>
            <Title style=styles.cardTitle>title</Title>
        </Card> 
    
        </>

【问题讨论】：

source.name? （或newsStory.source.name，因为你还没有破坏它。）

【参考方案1】：

由于源是一个对象，所以使用source.name

dataArray.map((newsStory)=> 
    const   url, urlToImage, title = newsStory
    
      return (
         <>
        <Card style=styles.card onPress=()=> Linking.openURL(url)>
            <Card.Cover source= uri: urlToImage  />
//trying to show source in this 'Text'
            <Text style=styles.source>newsStory.source.name</Text>
            <Title style=styles.cardTitle>title</Title>
        </Card> 
    
        </>