React Native 应用程序显示一个错误，指出即使提供了密钥，密钥也将是未定义的

Question

在我的 RN 应用程序中，我有以下数组。

const PDFItems = [

  { id: 1001, name: 'APPLICATION FORM.PDF', size: '2.77 MB' },

  { id: 1002, name: 'BENEFIT ILLUSTRATION.PDF', size: '368 KB' },

  { id: 1003, name: 'PRODUCT SUMMARY.PDF', size: '2.02 MB' },

  { id: 1004, name: 'TERMS AND CONDITIONS.PDF', size: '269 KB' },

];

我创建了以下函数来渲染项目。

renderPDFItems = () => {

    return PDFItems.map(item => (

      <ListItem

        key={item.id.toString()}

        icon={<Download />}

        title={item.name}

        label={item.size}

        onPress={() => {}}

      />

    ));

  }

这是我的 ListItem 组件。

import React, { Component } from 'react';

import { StyleSheet, TouchableOpacity, View } from 'react-native';

import colors from 'res/colors';

import SinglifeText from './text';

interface IProps {

  title: string;

  label: string;

  icon: Object;

  key: string;

  onPress?: Function;

}

class ListItem extends Component<IProps> {

  render() {

    const { title, label, icon, key, onPress } = this.props;

    return (

      <TouchableOpacity onPress={onPress} key={key}>

        <View style={styles.itemContainer}>

          <View style={styles.titleContainer}>

            <View style={styles.icon}>{icon}</View>

            <SinglifeText type={SinglifeText.Types.BUTTON_LBL} label={title} />

          </View>

          <SinglifeText type={SinglifeText.Types.BODY_SMALL} label={label} />

        </View>

      </TouchableOpacity>

    );

  }

}

const styles = StyleSheet.create({

  itemContainer: {

    borderColor: colors.gray,

    borderRadius: 4,

    borderWidth: 0.5,

    padding: 14,

    paddingVertical: 24,

    flexDirection: 'row',

    alignContent: 'center',

    alignItems: 'center',

    marginBottom: 10,

  },

  titleContainer: {

    flex: 1,

    flexDirection: 'row',

    alignContent: 'center',

    alignItems: 'center',

  },

  icon: {

    marginRight: 10,

  },

});

export default ListItem;

当我运行该应用程序时，它会显示一条警告，指出这 key不是道具。尝试访问它会导致undefined被退回。如果您需要在子组件中访问相同的值，则应将其作为不同的 prop 传递

我在这里做错了什么？我的键是唯一的，但仍然出现此错误。

Answer 1

正如上面有些人所说，我们不需要关键道具。TouchableOpacity 默认有 key，我们不能使用 key another prop 作为 'key'

Answer 2

似乎您key定义的道具对TouchableOpacity key={key}.&nbsp;尝试将 key prop 重命名为其他名称。