React中如何将列表项的Key值通过按钮传递给函数并实现删除功能

问题核心 #

需要实现点击列表项内的按钮，将对应项的索引传递给handleDelete函数，过滤掉该元素并重新渲染列表。

原代码的问题点 #

1. 按钮点击事件的参数错误：原代码中onClick={(idx) => handleDelete(idx)}里的idx实际是点击事件对象，而非map循环中的列表项索引，导致传递给handleDelete的不是正确的索引值。
2. handleDelete函数未完成过滤逻辑：缺少正确更新状态的代码。

完整修正代码 #

import { useState } from "react";

function MyComponent() {
    const [foods, setFoods] = useState(["Apple", "Orange", "Banana"]);
    // 改用受控组件管理input值，避免直接操作DOM
    const [inputValue, setInputValue] = useState("");

    const handleSubmit = () => {
        if (inputValue.trim()) {
            setFoods(prevFoods => [...prevFoods, inputValue]);
            setInputValue("");
        }
    };

    const handleDelete = (targetIdx) => {
        // 过滤掉目标索引对应的项，更新状态
        setFoods(prevFoods => prevFoods.filter((_, currentIdx) => currentIdx !== targetIdx));
    };

    return (
        <>
            <ul>
                {foods.map((el, idx) => (
                    <li key={idx}>
                        {el}
                        {/* 修正点击事件，传递正确的索引 */}
                        <button onClick={() => handleDelete(idx)}>删除 {idx}</button>
                    </li>
                ))}
            </ul>

            {/* 受控组件写法 */}
            <input
                id="input-fruit"
                type="text"
                placeholder="Enter a food item"
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
            />
            <button onClick={handleSubmit}>Submit</button>
        </>
    );
}

export default MyComponent;

关键改动说明 #

• 修正事件参数传递：将按钮的onClick改为() => handleDelete(idx)，直接把map循环中的索引传递给删除函数，避免事件对象覆盖索引变量。
• 实现handleDelete逻辑：使用setFoods结合函数式更新（确保基于最新状态修改），通过filter方法保留所有索引不等于目标索引的项，从而删除指定元素。
• 优化input为受控组件：用useState管理输入框值，替代直接操作DOM的方式，符合React的状态管理规范。

额外建议 #

尽量不要使用列表项的索引作为key（当列表存在增删操作时，可能导致组件复用异常），如果每个食物项有唯一标识（比如名称唯一），可以用el作为key，例如<li key={el}>。

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