在React Native组件中使用两次“map”的问题

tyg4sfes  于 2023-02-25  发布在  React
关注(0)|答案(3)|浏览(159)

我有一个无法解决的问题,我有一串对象,它又有另一串对象

const data = [
        {
            title: 'Medical',
            data: [{
                notice: 'Test 1',
                documentType: 'Medical',
                file: 'https://test.1'
            }],
        }
    ];

我尝试在滚动视图组件中根据标题加载这些项

<View>
            <Header title={PERSONAL_INFO}/>
            <Center>
                <ScrollView w={["200", "300"]} h="80">
                    {data.map((item, index) => (
                        (<View>
                            <Center>
                                <Heading>
                                    {item.title}
                                </Heading>
                                {
                                    data[index].data.map((item) =>
                                        <Text>{item.notice}</Text>
                                    )
                                }
                            </Center>
                        </View>)
                    ))}
                </ScrollView>
            </Center>
        </View>

只有一个条件,所有的东西都正确加载,我得到一个警告,我不能摆脱。

Warning: Each child in a list should have a unique "key" prop.
7cjasjjr

7cjasjjr1#

当使用React呈现一个项目列表时,每个元素都应该被赋予一个唯一的key。这些键允许React更有效地更新它的组件树,方法是提供一种方法来确定某些组件是否只是移动了,而不需要更新。在他们的beta文档中的"为什么React需要键?"一节对此有一个很好的类比。
也就是说,您只需要为每个map中呈现的最外层组件提供一个唯一的键。

// Assuming your item has some unique identifier property...
type Item = {
    id: string
}

// Example data array
const data: Item[] = [
    { id: "first item" },
    { id: "second item" }
]
<View>
    {data.map(item => (
        {/* key prop used here */}
        <View key={item.id}>
            {/* This doesn't need a key because it isn't the outermost
                component rendered in the map
            */}
            <Text>Some example text</Text>

            {/* Anything can go in here, including another nested map.
                Just make sure to give each element a unique key in that one as well.
            */}
        </View>
    ))}
</View>

还请注意,* React文档建议不要将索引用作键 *(请参见章节末尾)。

yshpjwxd

yshpjwxd2#

尝试在item.data上Map

<View>
          {data.map((item, idx) => ( <---- first array
            <View key={idx}>
              <Text style={{ fontSize: 40 }}>{item.title}</Text>
                {item.data.map((subItem, key) => ( <--- inner array
              <View key={key}>
                <Text style={{ fontSize: 20 }}>{subItem.notice}</Text>
                <Text style={{ fontSize: 20 }}>{subItem.documentType}</Text>
                <Text style={{ fontSize: 20 }}>{subItem.file}</Text>
              </View>
                ))}
            </View>
          ))}
        </View>
oxf4rvwz

oxf4rvwz3#

您需要为Map时返回的每个项的顶级容器给予键,例如View和Text

<View>
            <Header title={PERSONAL_INFO}/>
            <Center>
                <ScrollView w={["200", "300"]} h="80">
                    {data.map((item, index) => (
                        (<View key={index}>
                            <Center>
                                <Heading>
                                    {item.title}
                                </Heading>
                                {
                                    data[index].data.map((item, idx) =>
                                        <Text key={idx}>{item.notice}</Text>
                                    )
                                }
                            </Center>
                        </View>)
                    ))}
                </ScrollView>
            </Center>
        </View>

如果您有Id可供引用,那就更理想了,因为使用索引作为键是一种反模式,但对于您用例来说可能没问题。

相关问题