javascript - React Native 应用程序显示错误，指出即使提供 key 后 key 也将未定义

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 不是 Prop 。尝试访问它将导致返回undefined。如果您需要在子组件中访问相同的值，则应该将其作为不同的 prop 传递

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

Answer 1

只是不要命名 Prop key。像 id 这样的东西具有相同的语法含义。

renderPDFItems = () => {
    return PDFItems.map(item => (
      <ListItem
        id={item.id.toString()}
        icon={<Download />}
        title={item.name}
        label={item.size}
        onPress={() => {}}
      />
    ));
  }

ListItem.js

class ListItem extends Component<IProps> {
  render() {
    const { title, label, icon, id, onPress } = this.props;

    return (
      <TouchableOpacity onPress={onPress} key={id}>
        <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>
    );
  }
}