React数组map渲染列表时如何将book.id传递给onClick处理函数

你当前的onClick写法有两个核心错误：

• 直接写handleDelete(xxx)属于渲染时立即执行函数，不是等用户点击按钮才触发——onClick属性需要接收一个函数引用，而不是函数执行后的返回值
• 传参格式错误：你写的{ book.id }是JS对象的简写属性语法，会被解析成{ "book.id": xxx }的对象，但你的handleDelete需要接收的是id原始值，根本不需要套对象层

两种写法都符合React规范，按需选择即可：

1. 箭头函数包裹（最常用，可读性最高） #

直接在onClick里写一个箭头函数，点击触发时再调用你的删除方法：

<button onClick={() => handleDelete(book.id)}>delete</button>

2. bind预绑定参数 #

用Function.prototype.bind提前把参数绑定到函数上，传入的第一个参数是this指向（函数组件里不需要this，传null就行），后面跟要透传的参数：

<button onClick={handleDelete.bind(null, book.id)}>delete</button>

顺便把你原代码里其他会导致运行报错的问题一起修复了（漏引useState、return后没包JSX括号、img非自闭合、组件括号没闭合）：

import { useState } from 'react';
import { bookData } from './data';

const App = () => {
    const [bookList, setBookList] = useState(bookData)

    const handleDelete = (bookId) => {
        console.log('待删除书籍id：', bookId)
        // 实际删除逻辑可直接用下面这行
        // setBookList(bookList.filter(book => book.id !== bookId))
    };

    return (
        <div className='bookCards'>
        {bookList.map((book) => {
            return (
                <div className='bookCard' key={book.id}>
                    <img className='coverImg' src={book.coverimg} alt={book.title} />
                    <div>Title: {book.title}</div>
                    <div>Author: {book.author}</div>
                    <div>Year: {book.year_written}</div>
                    <div>Edition: {book.edition}</div>
                    <button onClick={() => handleDelete(book.id)}>delete</button>                        
                </div>
            )
        })}
        </div>
    )
}
export default App;

小提示：把state命名成state可读性很差，建议改成对应业务含义的名字比如bookList，后续维护更方便。

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