在 React Native 中以文本形式呈现对象项答案

【问题标题】：Render object items in text in React Native在 React Native 中以文本形式呈现对象项
【发布时间】：2020-08-03 09:20:25
【问题描述】：

我有以下对象要映射并显示为文本。

console.log(props.items);

    Object {
      "p2": CartItem {
        "productPrice": 499,
        "productTitle": "Farm Feast Pizza",
        "productdescription": "Caramelized onion, yellow capsicum, black olives, cherry tomatoes, zucchini,  micro greens, feta and mozzarella cheese.",
        "productimageUrl": "https://i.imgur.com/ZO82XbL.jpg",
        "quantity": 1,
        "sum": 499,
      }
Object {
  "p1": CartItem {
    "productPrice": 499,
    "productTitle": "Deluxe Veggie Pizza ",
    "productdescription": "Red peppers, broccoli, basil, cherry tomatoes, black olives, zucchini, jalapeno, micro greens, feta and mozzarella cheese.",
    "productimageUrl": "https://i.imgur.com/NEbikrh.jpg",
    "quantity": 1,
    "sum": 499,
  },
}

我正在尝试渲染 productTitle

<Text style={styles.title}>{props.items.productTitle}</Text>

但它没有渲染，请帮我解决这个问题。

【问题讨论】：

props.items.p2.productTitle 也许？
数据是动态生成的，所以我不能硬编码键值
props.items[0].productTitle?试试看
或者如果你用 res 解决 then 调用或导致第二个调用 res[0] 或 result[0]

标签： arrays react-native object

【解决方案1】：

您需要遍历数组并将每个项目映射到Text 元素

{props.items.map((item, index) => (
  <Text style={styles.title} key={index}>{item.productTitle}</Text>
))}

这里是官方的 react doc 供参考：https://reactjs.org/docs/lists-and-keys.html

【讨论】：