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

Question

你能帮我改一下这个代码吗？

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

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

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

export default Completed;

Answer 1

添加关键道具喜欢

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

Answer 2

确保为任何循环中的第一项提供键。

在你的情况下，将 key 添加到 List.Section

<List.Section key={item.title} title={item.date}>
  ........
</List.Section>

Key 可以是数据中的任何唯一字符串

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

How to handle key prop in a list?

key

list

accordion

react-native

react-native-paper