从反应原生的json文件中获取嵌套路径答案

【问题标题】：Getting nested path from json file in react native从反应原生的json文件中获取嵌套路径
【发布时间】：2020-12-29 06:08:16
【问题描述】：

我做了一个json文件

data.js

export const PRODUCT_DATA = [
{
    name: 'abc',
    price: 90,
    weight: '1 kg',
    currency: 'INR',
    liked: true,
    image: require('../assets/images/carrots/Rectangle238.png')
},
{
    name: 'bce',
    price: 10,
    weight: '1 kg',
    currency: 'USD',
    liked: false,
    image: require('../assets/images/mango/Rectangle234.png')
},
{
    bringOutSpecialDealsComponent: [
        {
            name: 'def',
            price: 120,
            weight: '1 kg',
            currency: 'INR',
            liked: true,
            image: require('../assets/images/grapes/Rectangle235.png'),
        },
        {
            name: 'feg',
            price: 21,
            weight: '1 kg',
            currency: 'USD',
            liked: false,
            image: require('../assets/images/mango/Rectangle234.png')
        },
    ]
},

];

我已将此文件导入另一个组件文件并尝试使用它。

Store.js

<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
    {PRODUCT_DATA.map((item, index) => {
        return (<View style={styles.card}>
            <BringOutSpecialDeal
                imgSrc={item.bringOutSpecialDealsComponent.image}
                name={item.bringOutSpecialDealsComponent.name}
                price={"Rs. " + item.bringOutSpecialDealsComponent.price}
                weight={item.bringOutSpecialDealsComponent.weight}
                like={item.bringOutSpecialDealsComponent.weight}
            />
        </View>);
    })}
</ScrollView>

但我收到错误消息，上面写着Cannot read property 'image' of undefined。我无法弄清楚如何获取 json 文件的嵌套路径。

【问题讨论】：

标签： json react-native

【解决方案1】：

{PRODUCT_DATA[2].bringOutSpecialDealsComponent.map((item, index) => {
        return (<View style={styles.card}>
            <BringOutSpecialDeal
                imgSrc={item.image}
                name={item.name}
                price={"Rs. " + item.price}
                weight={item.weight}
                like={item.weight}
            />
        </View>);

【讨论】：

【解决方案2】：

您正在访问 bringOutSpecialDealsComponent 数组键，而它在数组对象的前两项中不存在。你可以做什么

<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
  {PRODUCT_DATA.map((item, index) => {
    return (
      <View style={styles.card}>
        {item.bringOutSpecialDealsComponent
          ? item.bringOutSpecialDealsComponent.map((innerItem, i) => {
              return (
                <BringOutSpecialDeal
                  imgSrc={innerItem.image}
                  name={innerItem.name}
                  price={"Rs. " + innerItem.price}
                  weight={innerItem.weight}
                  like={innerItem.weight}
                />
              );
            })
          : null}
      </View>
    );
  })}
</ScrollView>

【讨论】：

我只是在页面上得到空白空间，没有错误消息，但它只是屏幕上的一个空白页面