React函数组件中inputList状态删除不更新及参数异常问题

错误原因分析 #

1. 删除按钮参数传递错误
   你在删除按钮的onClick回调中写了(i)=>{handleRemoveClick(i)}，这里的i并不是map循环的索引，而是React的合成事件对象。因为onClick回调的第一个参数默认是事件对象，你用i作为参数名，覆盖了外层map的索引变量，导致handleRemoveClick接收到的是事件对象而非预期的索引值，自然无法正确删除对应元素。

2. 使用数组索引作为key的潜在问题
   你用key={i}（数组索引）作为元素的key，当列表元素被删除后，后续元素的索引会发生变化，React可能无法准确追踪元素的更新，引发渲染异常或状态不同步的问题。

修复步骤 #

1. 修正删除按钮的参数传递 #

把删除按钮的onClick回调改成直接传递map的索引，避免参数名覆盖：

<button onClick={() => handleRemoveClick(i)}>Remove</button>

这样就能确保传给handleRemoveClick的是当前元素的正确索引。

2. 优化状态更新逻辑（推荐） #

在handleRemoveClick和handleOnChange中使用函数式更新，避免闭包导致的状态过期问题，确保每次更新都基于最新的状态：

const handleRemoveClick = index => {
    setInputList(prevList => {
        const newList = [...prevList];
        newList.splice(index, 1);
        return newList;
    });
};

const handleOnChange = (e, i) => {
    const { name, value } = e.target;
    setInputList(prevList => {
        const newList = [...prevList];
        newList[i][name] = value;
        return newList;
    });
};

3. 替换索引key为唯一标识（推荐） #

给每个列表项添加唯一id，取代索引作为key，避免动态增删时的渲染问题：

// 生成唯一id的简单方法，生产环境可使用uuid库
const generateId = () => Math.random().toString(36).substring(2, 9);

// 初始化状态
const [inputList, setInputList] = useState([{ id: generateId(), word: "", meaning: "" }]);

// 添加新元素时生成新id
const handleAddClick = () => {
    setInputList(prevList => [...prevList, { id: generateId(), word: "", meaning: "" }]);
};

// 渲染时用id作为key
{inputList.map((x, i) => {
    return (
        <div key={x.id} className="flex w-full justify-center">
            {/* 输入框和按钮 */}
        </div>
    )
})}

完整修复后的代码示例 #

import { useState } from 'react';

const generateId = () => Math.random().toString(36).substring(2, 9);

const WordMeaningForm = () => {
    const [inputList, setInputList] = useState([{ id: generateId(), word: "", meaning: "" }]);

    const handleAddClick = () => {
        setInputList(prevList => [...prevList, { id: generateId(), word: "", meaning: "" }]);
    };

    const handleOnChange = (e, i) => {
        const { name, value } = e.target;
        setInputList(prevList => {
            const newList = [...prevList];
            newList[i][name] = value;
            return newList;
        });
    };

    const handleRemoveClick = index => {
        setInputList(prevList => {
            const newList = [...prevList];
            newList.splice(index, 1);
            return newList;
        });
    };

    return (
        <div>
            {inputList.map((x, i) => {
                return (
                    <div key={x.id} className="flex w-full justify-center mb-2">
                        <input
                            onChange={(e) => handleOnChange(e, i)}
                            name="word"
                            placeholder="Word"
                            type="text"
                            value={x.word}
                            className="mr-2"
                        />
                        <input
                            onChange={(e) => handleOnChange(e, i)}
                            name="meaning"
                            placeholder="Meaning"
                            type="text"
                            value={x.meaning}
                            className="mr-2"
                        />
                        {inputList.length !== 1 && (
                            <button onClick={() => handleRemoveClick(i)}>Remove</button>
                        )}
                    </div>
                );
            })}
            <button onClick={handleAddClick} className="mt-2">Add More</button>
        </div>
    );
};

export default WordMeaningForm;

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