列表中的每个 child 都应该有一个唯一的 "key" 属性。检查渲染方法

Question

您好，我是编程新手，遇到了一个问题。我用 objects 数组和属性 'id' 构建了一个接口。我使用它 (id: 属性) 作为我的唯一键，但它给了我一个错误。这就是界面

export interface IState {
  meetupsy: {
      id: number
      image: string
      title: string
      address: string
      description: string
  }[]
}

那是一个列表组件

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}>
                <img src={meetup.image} alt={meetup.title} />
                </div>
                <div className={classes.listheader}>
                    <h3>{meetup.title}</h3>
                    <address>{meetup.address}</address>
                    <p>{meetup.description}</p>
                </div>  
                <div className={classes.actions}>
                    <button>To Favorite</button>
                </div>
            </li>
            </Card>
            )
        })
    }

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

export default MeetupList;

我真的很困惑它说“检查 MeetupList 的渲染方法”

Answer 1

This question was answered multiple times.

您要遍历的每个元素都必须有一个 key 属性，它必须放在最外层的元素中并且必须是唯一的。

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

列表中的每个 child 都应该有一个唯一的 "key" 属性。检查渲染方法

Each child in a list should have a unique "key" prop. Check render method

key

typescript

reactjs

react-tsx

react-props