list - 如何处理列表中的关键道具？

Question

你能帮我改正这段代码吗？

我想确保我有一份客户订单清单。每个订单都必须能够展开，以便我们可以访问商品数量、商品详情和订单价格的详细信息。我想尝试使用 react-native-paper 和这个包的列表组件来做到这一点。但是，每个项目的键都有一个错误。我该如何解决？谢谢你的帮助。

> 警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

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',
        date:'01/01/2020',
        icon: 'av-timer'
    },
    {
        title: 'Commande 4',
        date:'01/01/2020',
        icon: 'flight-takeoff'
    },
      {
        title: 'Commande 5',
        date:'01/01/2020',
        icon: 'av-timer'
    },
    {
        title: 'Commande 6',
        date:'01/01/2020',
        icon: 'flight-takeoff'
    },
    
    ]

  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 : ...€&quot; />
      </List.Accordion>      
    </List.Section>
     ))
  }
</ScrollView>
  );
}

export default Completed;

标签： listreact-nativekeyaccordionreact-native-paper

Answer 1

添加关键道具，如

list.map((item, i) => (
    <List.Section title={item.date} key={i.toString()}> // Like here
      ....   
    </List.Section>
))