如何解决如何处理列表中的关键道具?
您能帮助我尝试更正此代码吗?
我想确保我有一份客户订单清单。每个订单必须能够展开,以便我们可以访问商品数量,其详细信息和订单价格的详细信息。 我想尝试使用react-native-paper和该软件包的list组件来做到这一点。 但是,我在每个项目的键上都遇到了错误。我该如何解决? 感谢您的帮助。
>警告:列表中的每个孩子都应该有一个唯一的“关键”道具。
import * as React from 'react';
import { ScrollView } from 'react-native';
import { List } from 'react-native-paper';
const Completed = () => {
const [expanded,setExpanded] = React.useState(true);
const handlePress = () => setExpanded(!expanded);
const list = [
{
title: 'Commande 1',date:'01/01/2020',icon: 'av-timer'
},{
title: 'Commande 2',icon: 'flight-takeoff'
},{
title: 'Commande 3',{
title: 'Commande 4',{
title: 'Commande 5',{
title: 'Commande 6',]
return (
<ScrollView>
{
list.map((item,i) => (
<List.Section title={item.date}>
<List.Accordion
title={item.title}
left={props => <List.Icon {...props} icon="folder" />}>
<List.Item title="Nombre d'articles : ..." />
<List.Item title="Prix total : ...€" />
</List.Accordion>
</List.Section>
))
}
</ScrollView>
);
}
export default Completed;
解决方法
添加关键道具,例如
list.map((item,i) => (
<List.Section title={item.date} key={i.toString()}> // Like here
....
</List.Section>
))
,
请确保在任何循环中为第一项提供键。
在您的情况下,将键添加到List.Section
<List.Section key={item.title} title={item.date}>
........
</List.Section>
键可以是数据中的任何唯一字符串
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。