列表中的每个子项都应该有一个唯一的“key”道具。检查渲染方法

Question

嗨，我对编程还很陌生，但我遇到了一个问题。我已经构建了一个带有对象数组和属性“id”的接口。我使用它（id：属性）作为我的唯一密钥，但它给了我一个错误。 这就是界面

export interface IState {
  meetupsy: {
      id: number
  }[]
}

这是一个列表组件

import classes from './MeetupList.module.css'
import { IState as Props } from '../../App'
import Card from '../ui/Card'

interface IProps {
    meetups: Props['meetupsy']
}

const MeetupList: React.FC<IProps> = ({meetups}) => {

    const renderList = ():JSX.Element[] => {
        return meetups.map((meetup) => {
            return <Card>
                <li key={meetup.id} className={classes.list}>
                    <div className={classes.image} />
                </li>
            </Card>
        })
    }

    return (
        <ul className={classes.render}>
            {renderList()}
        </ul>
    )
}

export default MeetupList;

我真的很困惑它说“检查

MeetupList

的渲染方法”

Answer 1

这个问题已经回答过多次了。

您要迭代的每个元素都必须有一个

key

属性，该属性必须放在最外面的元素中并且必须是唯一的。

const renderList = (): JSX.Element[] =>
  meetups.map((meetup) => (
    <Card key={meetup.id}>
      ...
    </Card>
  ));