React中Prop Drilling问题：点击删除按钮传ID时报错

你遇到的handleDelete is not a function报错，核心原因是尝试传递ID时的写法错误——如果直接写onClick={handleDelete(item.id)}，组件渲染阶段就会立即执行该函数，导致onClick绑定的是函数执行后的返回值（通常为undefined），自然触发“不是函数”的报错。

要实现点击删除按钮打印对应卡片ID、过滤数据并更新状态，按以下步骤修改代码：

1. 修正Card组件的点击事件绑定 #

在Card.jsx中，将删除按钮的onClick改为箭头函数包裹，确保仅在点击时调用handleDelete并传入当前卡片ID：

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(item.id)} className='btn'>
                            <FaTimes></FaTimes>
                        </button>
                    </div>
                    <p className='card-text'>{item.feedbackText}</p>
                </div>
            </div>
        </>
    )
}

export default Card

2. 完善App组件的handleDelete函数 #

在App.jsx中，更新handleDelete函数，实现ID打印与状态更新逻辑：

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) => {
        // 打印目标卡片ID
        console.log('要删除的卡片ID：', id)
        // 过滤数据并更新状态
        setFeedback(prev => prev.filter(item => item.id !== id))
    }
    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

关于Prop Drilling的补充说明 #

你当前的props传递流程是App → FeedbackList → FeedbackItem → Card，这种逐层向下传递props的方式就是Prop Drilling。对于小型项目，这种方式简单直接；但如果组件层级过深，写法会变得繁琐，后续可学习React Context API或状态管理库（如Redux）来简化状态传递逻辑。

内容的提问来源于stack exchange，提问作者Nikhil