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

【问题标题】：How to handle key prop in a list?如何处理列表中的关键道具？
【发布时间】：2020-11-09 12:30:11
【问题描述】：

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

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

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

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;

【问题讨论】：

标签： list react-native key accordion react-native-paper

【解决方案1】：

添加key prop

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：