React中如何通过onChange事件实现数组元素的更新与新增？

问题出在哪 #

1. 数组更新逻辑错误：你当前写的setArray([...array, obj])只会一个劲往数组里追加元素，完全没检查是否存在同标识的已有元素，导致数组越变越长。
2. State异步陷阱：setObj是异步操作，调用后立刻访问obj拿到的还是旧值，存到数组里的内容根本不是最新的。
3. Select组件存在冗余bug：你在Select组件里写了const {id , name} = data;，但这里的data是传入的选项数组，根本解构不出id和name，属于纯冗余代码，还可能引发潜在问题。

怎么改 #

先修复Select组件的冗余代码 #

删掉那行没用的解构：

function Select({data, ...selectProps}) {
    // 移除 const {id , name} = data; 这行无效代码
    return (
        <>
        <select {...selectProps}>
            <option defaultValue='#'>#</option>
            {data.map((item, index) =>
                <option key={index} value={item.id}>{item.name}</option>
            )} 
        </select>
        </>
    )
};

export default Select;

重构Teeth组件的数组更新逻辑 #

去掉多余的obj状态，直接在onChange中处理数组更新，用函数式更新获取最新数组状态，同时判断元素是否存在：

const Teeth = () => {
    // 移除单独的obj state，直接维护数组即可
    const [array, setArray] = useState([]);
    console.log(array);

    // 封装通用的数组更新函数，避免重复逻辑
    const updateArray = (newItem) => {
        setArray(prevArray => {
            // 查找数组中是否已有同idDetail的元素
            const existingIndex = prevArray.findIndex(item => item.idDetail === newItem.idDetail);
            if (existingIndex !== -1) {
                // 存在则替换旧元素
                const updatedArr = [...prevArray];
                updatedArr[existingIndex] = newItem;
                return updatedArr;
            } else {
                // 不存在则追加新元素
                return [...prevArray, newItem];
            }
        });
    };

    return(
        <>
            <div className="col-md-6 mt-10">
                <div className="row">
                    <div className="col-md-6 mt-10 text-center">
                        <Title value={mo.title}></Title>
                        {data.map((item, index) => {
                        if (item.list.length === 0) {
                            return (
                                <InputTextarea key={index}
                                className="text-center form-control"
                                type="text"
                                name="typeNote"
                                onChange={(e) => {
                                    // 直接构造要存储的元素，调用更新函数
                                    const newItem = {idDetail: item.id, typeNote: e.target.value};
                                    updateArray(newItem);
                                }}
                                placeholder={item.name}
                                />
                                )
                            } else {
                                return (<Select 
                                className="form-control"
                                onChange={(e) => {
                                    // 构造选中后的元素，更新数组
                                    const newItem = {idDetail: e.target.value};
                                    updateArray(newItem);
                                }}
                                data={item.list} key={index} >
                                </Select>);
                            }
                        })}

                    </div>
                </div>

            </div>      
        </>
    )
};

export default Teeth;

关键说明 #

• 函数式更新：setArray(prevArray => ...)确保我们永远基于最新的数组状态修改，避开State异步更新导致的旧值问题。
• 存在性判断：通过findIndex定位同标识元素，实现"存在则更新，不存在则添加"的核心需求。
• 简化状态管理：移除冗余的obj状态，直接在事件回调中构造目标元素，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Trương Văn Giang