React实现点击删除当前列表项功能遇阻，请求技术帮助

1. 实现删除逻辑（修改App.js） #

你已经能获取到点击项的id，接下来只需通过filter方法生成新数组，过滤掉对应id的列表项，再用setDataList更新状态即可：

import React, { useState, Fragment } from "react";
import UserAddForm from "./UserAddForm/UserAddForm";
import UserList from "./UserList/UserList";
const App = () => {
  const [dataList, setDataList] = useState([]);
  const FormDatas = (datas) => {
    setDataList([datas, ...dataList]);
  };
  const deleteListItem = (clickedListId) => {
    // 过滤掉id匹配的项，生成新数组
    const updatedList = dataList.filter(item => item.id !== clickedListId);
    setDataList(updatedList);
  };

  return (
    <Fragment>
      <UserAddForm enteredFormVals={FormDatas} />
      <UserList listDatas={dataList} deleteItem={deleteListItem} />
    </Fragment>
  );
};
export default App;

2. 优化事件传递（修改UserList.js） #

当前通过e.target.id获取id存在隐患：如果点击<li>内部的文本节点，e.target可能不是<li>元素，导致获取不到正确id。直接把data.id作为参数传给删除函数更可靠：

import React from "react";
import userListing from "./UserList.module.css";

const UserList = (props) => {
  // 直接接收itemId，无需通过事件对象获取
  const deleteHandler = (itemId) => {
    props.deleteItem(itemId);
  };
  return (
    <div className={`${userListing.users} ${userListing.whiteBg}`}>
      <ul>
        {props.listDatas.map((data) => (
          <li key={data.id} onClick={() => deleteHandler(data.id)}>
            {data.name}
            {data.age}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

说明 #

• React更新数组状态时必须返回新数组，不能直接修改原数组，filter方法会返回新数组，符合React状态更新规则。
• 直接传递data.id避免了事件冒泡导致的目标元素不匹配问题，让删除逻辑更稳定。

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