点击FaTimes图标时，如何利用key和value遍历<ul>并使用map？

首先你原代码里的问题：onClick回调里的e是鼠标事件对象，不是数组里的元素，所以console.log(e.value)根本拿不到你要的item值。要实现点击图标时拿到对应项的key（也就是item.id）和value，并遍历列表，按下面的方式改：

1. 优先用React数据驱动的方式（推荐） #

React是数据驱动视图的，你不用直接去遍历<ul>DOM元素，直接操作渲染列表的数组就行。如果需要修改列表（比如删除项），把数组转成组件内部状态：

import { useState } from 'react';
import { FaTimes } from 'react-icons/fa';

const Cards = ({ initialArr }) => {
  // 把传入的数组转成内部状态，方便后续修改
  const [arr, setArr] = useState(initialArr);

  // 点击图标时的处理函数，直接接收当前项的id和value
  const handleIconClick = (itemId, itemValue) => {
    // 拿到当前点击项的key和value
    console.log('当前点击项ID:', itemId, '值:', itemValue);

    // 遍历整个列表数据（这就是你要的遍历操作）
    arr.forEach(item => {
      console.log('遍历项：ID=', item.id, '值=', item.value);
    });

    // 举个例子：删除当前点击的项，DOM会自动更新
    setArr(prev => prev.filter(item => item.id !== itemId));
  };

  return (
    <ul className='output'>
      {arr.map(item => (
        <li key={item.id} className="card">
          {item.value}
          <FaTimes 
            color='red' 
            style={{cursor: 'pointer'}} 
            // 点击时把当前项的id和value传给处理函数
            onClick={() => handleIconClick(item.id, item.value)} 
          />
        </li>
      ))}
    </ul>
  );
};

2. 如果确实需要遍历DOM的<ul>元素 #

如果你的需求必须操作真实DOM的<ul>（比如做一些DOM层面的操作），可以用useRef获取<ul>的引用：

import { useState, useRef } from 'react';
import { FaTimes } from 'react-icons/fa';

const Cards = ({ initialArr }) => {
  const [arr, setArr] = useState(initialArr);
  // 获取ul的DOM引用
  const ulRef = useRef(null);

  const handleIconClick = (itemId, itemValue) => {
    console.log('当前点击项ID:', itemId, '值:', itemValue);

    // 遍历ul下的所有li元素
    if (ulRef.current) {
      const listItems = ulRef.current.querySelectorAll('li');
      listItems.forEach((li, index) => {
        console.log(`第${index+1}个li的内容：`, li.textContent);
        // 这里可以做DOM相关操作
      });
    }
  };

  return (
    // 给ul加上ref属性
    <ul className='output' ref={ulRef}>
      {arr.map(item => (
        <li key={item.id} className="card">
          {item.value}
          <FaTimes 
            color='red' 
            style={{cursor: 'pointer'}} 
            onClick={() => handleIconClick(item.id, item.value)} 
          />
        </li>
      ))}
    </ul>
  );
};

关键说明 #

• 不要在onClick里用e当参数（除非你要事件对象），直接把map遍历出来的item的属性传进处理函数，就能拿到对应的key和value。
• React里尽量用数据操作来控制视图，避免直接操作DOM，这样代码更符合React的设计思路，也更少出问题。

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