如何在React.js中使用map函数识别点击的行？

你当前的代码里，点击Delete按钮时没有把对应行的信息传递给deleteHandle函数，所以无法确定点击的是哪一行。可以通过以下几种方式解决：

• 传递行索引：在map循环时，把当前项的索引i作为参数传给点击事件处理函数。注意如果列表有增删操作，索引可能会变化，这种方式适合数据不会动态调整的场景。
  修改按钮的点击事件：

  <Button onClick={() => deleteHandle(i)}>Delete</Button>
  

• 传递完整行数据（推荐）：直接把当前行的val对象传给处理函数，这样能拿到该行的所有信息，比索引更可靠。建议给你的数据项添加唯一标识（比如id字段），避免用title这类可能重复的值来做判断。

完整修改后的代码示例 #

import React, { useState } from "react";
import { Button} from "@mui/material";
import "./styles.css";

const data =[
  {
      "id": 1,
      "title": "title1",
      "IsActive": 1
  },
  {
      "id": 2,
      "title": "title2",
      "IsActive": 0
  },
  {
      "id": 3,
      "title": "title3",
      "IsActive": 1
  },
  {
      "id": 4,
      "title": "title4",
      "IsActive": 1
  }
]

export default function App() {
  const [data2, setData2] = useState(data);
  
  const deleteHandle = (item) => {
    // 根据唯一id过滤掉要删除的项
    setData2(prevData => prevData.filter(itemData => itemData.id !== item.id));
  }

  const editHandle = (item) => {
    console.log("要编辑的行数据：", item);
    // 这里可以做打开编辑弹窗、填充表单等操作
  }

  return (
    <div className="App">
        {data2.map((val) => (
          <div className="box" key={val.id}>
            <h2>{val.title}</h2>
            <Button onClick={() => deleteHandle(val)}>Delete</Button>
            <Button onClick={() => editHandle(val)}>Edit</Button>
          </div>
        ))}
    </div>
  );
}

这里把列表项的key换成了val.id，这是React推荐的做法——用数据的唯一标识作为key，而不是索引，避免列表更新时出现渲染异常。

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