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

Question

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

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

那么如何遍历 'source' 对象以及它如何出现在我的卡片上？

数据示例

"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> 
    
        </>

Answer 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> 
    
        </>

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

React / React Native: How to Map over array and show Data on Cards

javascript

json

jsx

reactjs

react-native