我对React Js相当陌生，似乎无法让我的头围绕 prop 钻孔，我这里的问题是，当我单击删除按钮时，我想控制台记录相应的卡ID，然后稍后过滤它们并更改状态......

• 我确实尝试将id作为参数传递，但它会抛出一个错误，说handleDelete不是一个函数

App.jsx

import './App.css'
import { useState } from 'react'
import Header from './components/Header'
import FeedbackData from './data/FeedbackData'
import FeedbackList from './components/FeedbackList'
import FeedbackStats from './components/FeedbackStats'

function App() {
    const [feedback, setFeedback] = useState(FeedbackData)
    const handleDelete = (id) => {
        console.log(123)
    }
    return (
        <>
            <Header></Header>
            <div className='container col-12  col-sm-10 col-md-6 col-lg-7'>
                <FeedbackStats feedback={feedback}></FeedbackStats>
                <FeedbackList feedback={feedback} handleDelete={handleDelete}></FeedbackList>
            </div>
        </>
    )
}

export default App

FeedbackItem.jsx

import Card from './shared/Card'
function FeedbackItem({ item, handleDelete }) {
    return (
        <>
            <div className='feedback-item'>
                <Card item={item} handleDelete={handleDelete}></Card>
            </div>
        </>
    )
}

export default FeedbackItem

FeedbackList.jsx

function FeedbackList({ feedback, handleDelete }) {
    if (!feedback || feedback.length === 0) {
        console.log('no feedback')
    }

    return (
        <>
            {feedback.map((item) => (
                <FeedbackItem
                    key={item.id}
                    item={item}
                    handleDelete={handleDelete}></FeedbackItem>
            ))}
        </>
    )
}

export default FeedbackList

card.jsx

import { FaTimes, FaEdit } from 'react-icons/fa'
function Card({ item, handleDelete }) {
    return (
        <>
            <div className='card'>
                <div className='card-body'>
                    <div className='rating-badge' id='rating'>
                        {item.rating}
                    </div>
                    <div className='buttons'>
                        <button className='btn'>
                            <FaEdit></FaEdit>
                        </button>
                        <button onClick={handleDelete} className='btn'>
                            <FaTimes></FaTimes>
                        </button>
                    </div>
                    <p className='card-text'>{item.feedbackText}</p>
                </div>
            </div>
        </>
    )
}

export default Card