为什么我的ID失败了我的React组件？

Question

我需要此代码方面的一些帮助，它给出了未定义的“ ID”错误，可以提供一些帮助。

import React from "react";
    
    const ContactCard = (props) => {
        
        return(
            <div className="item">
                <div className="content">
                    <div className="Header">{props.contact.name}</div>
                    <div>{props.contact.email}</div>
                </div>
                <i className="trash alternate outline icon"
                        style={{color:"red", marginTop: "7px"}}
                    onClick = {() => props.clickHander(id)} >            
                </i>     
            </div>
        ); 
    }

Answer 1

猜猜，我相信，而不是使用id，而是使用props.contact.id。这就是为什么未定义的错误出现ID的原因。

Answer 2

比这答案，当您带上Props时，您也可以破坏性时，道具，示例：

import React from 'react'

const ContactCard = ({contact, clickHander}) => {
  return (
    <div className='item'>
      <div className='content'>
        <div className='Header'>{contact.name}</div>
        <div>{contact.email}</div>
      </div>
      <i className='trash alternate outline icon' style={{ color: 'red', marginTop: '7px' }} onClick={() => clickHander(contact.id)}></i>
    </div>
  )
}

export default ContactCard