React数组状态去重：提交按钮点击事件改写求助

const onSubmitFinalSelection = (val) => {
    // 检查数组中是否已有 experience 字段等于 selectedExperience 的元素
    const isDuplicate = finalselected.some(item => item.experience === selectedExperience);

    if (!isDuplicate) {
        setfinalSelected(prev => [
            ...prev,
            {
                experience: selectedExperience,
                inputfield
            }
        ]);
    }

    // 注意：setState 是异步操作，这里直接打印可能显示更新前的旧状态
    console.log(finalselected);
};

问题根源 #

你之前的判断逻辑!finalselected.includes(selectedExperience)完全无法实现去重，原因是：

• finalselected数组存储的是对象类型元素，而selectedExperience是字符串类型
• includes方法采用严格相等（===）比较，字符串和对象永远不可能相等，导致这个条件永远为true，每次点击都会添加新元素

核心修改 #

改用Array.some()遍历数组，通过对比对象的experience字段值来判断是否存在重复项，这才是符合需求的去重逻辑。

额外提醒 #

如果需要查看更新后的最新状态，不要直接在setfinalSelected后打印（因为setState是异步的），可以通过useEffect监听状态变化：

import { useEffect } from 'react';

// ...其他代码

useEffect(() => {
    console.log('最新的finalselected:', finalselected);
}, [finalselected]);

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