React中如何在map()内通过onClick向函数传递参数？

1. 先解决最初的语法错误 #

你一开始写的onClick={deleteProduct(id)}会导致组件渲染时直接执行函数，而不是点击按钮时触发，这是最常见的语法坑。正确写法有两种：

• 箭头函数包裹（最直观）：

{products.map(product => (
  <div key={product.id}>
    <button onClick={() => deleteProduct(product.id)}>删除</button>
  </div>
))}

• 提前绑定函数（类组件适用）：

// 类组件的constructor里绑定this
constructor(props) {
  super(props);
  this.deleteProduct = this.deleteProduct.bind(this);
}

// 渲染时绑定参数
<button onClick={this.deleteProduct.bind(this, product.id)}>删除</button>

2. TypeError: 无法读取undefined的deleteProduct属性 #

这个问题90%是this指向不对：

• 如果你用的是类组件：要么没给deleteProduct绑定this，要么用了普通函数定义方法导致this丢失。解决办法二选一：
  1. 在constructor里绑定this（上面的代码）
  2. 用箭头函数定义类方法：

  deleteProduct = (id) => {
    // 这里的this会正确指向组件实例
    // 你的删除逻辑，比如过滤products数组
    this.setState(prev => ({
      products: prev.products.filter(item => item.id !== id)
    }))
  }
  

• 如果你用的是函数组件：检查deleteProduct是不是定义在组件内部，或者有没有被正确引入，别搞出作用域问题。

3. 用setID存参数报错的问题 #

状态更新是异步的，如果你点击按钮时先setID再立刻调用删除函数，拿到的会是旧的状态值。没必要多此一举存状态，直接在onClick里把ID传给deleteProduct就行。如果一定要用状态，得靠useEffect监听状态变化：

import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([/* 你的产品数据 */]);
  const [deleteId, setDeleteId] = useState(null);

  const deleteProduct = (id) => {
    setProducts(prev => prev.products.filter(item => item.id !== id));
  }

  // 监听deleteId变化，触发删除
  useEffect(() => {
    if (deleteId !== null) {
      deleteProduct(deleteId);
      setDeleteId(null); // 重置状态
    }
  }, [deleteId]);

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <button onClick={() => setDeleteId(product.id)}>删除</button>
        </div>
      ))}
    </div>
  )
}

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