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

问题描述

您能帮助我尝试更正此代码吗？

我想确保我有一份客户订单清单。每个订单必须能够展开，以便我们可以访问商品数量，其详细信息和订单价格的详细信息。 我想尝试使用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>

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