javascript - 映射嵌套数组以在 React Native 中呈现

Question

我的项目中有一个嵌套数组对象。这是我拥有的数组：

const listItem = [
    {name:'Patrick star',id:"1",costs:[{name:'Read Book'},{name:'Drink water'}]},
    {name:'Gallileo',id:"2",costs:[{name:'Read Book'},{name:'Drink water'},,{name:'Walking'}]},
    {name:'Einsten',id:"3",costs:[{name:'Read Book'},{name:'Drink water'}]},
    {name:'Peterson',id:"4",costs:[{name:'Read Book'},{name:'Drink water'}]},
    {name:'Schwarzenneger',id:"5",costs:[{name:'Read Book'},{name:'Drink water'}]},
    {name:'Dostoyevsky',id:"6",costs:[{name:'Read Book'},{name:'Drink water'}]}
]

现在，我在我的项目中渲染它。名称显示正常，但我无法costs通过映射添加。这是我所达到的：

 <FlatList
    style={{marginTop:10}}
    data={listItem}
    renderItem={({item})=>(
    <View style={{justifyContent:'center',marginBottom:10}}>
      <Text>{item.name}</Text>
        {listItem.map((u,i) => {
            return (
                <Text>{u.costs[i].name}</Text> //this line throws error
            )
        })
        }
    </View>
    )}
 />

我可能在映射上做错了什么。

标签： javascriptreact-native

Answer 1

您必须映射成本而不是 listItem：

<FlatList
    style={{marginTop:10}}
    data={listItem}
    renderItem={({item})=>(
    <View style={{justifyContent:'center',marginBottom:10}}>
      <Text>{item.name}</Text>
        {item.costs.map(cost => {
            return (
                <Text>{cost.name}</Text>
            )
        })
        }
    </View>
    )}
 />