React中如何在数组中保存不重复的对象？

只需要修改handleAddList函数，在添加前判断当前标签是否已存在于目标数组中即可，核心是利用id作为唯一标识来做重复校验：

const handleAddList = (label) => {
    // 检查labelsList里是否已有相同id的标签
    const hasDuplicate = labelsList.some(item => item.id === label.id);
    // 只有不存在重复时才添加
    if (!hasDuplicate) {
        // 用函数式更新state，避免异步更新导致的旧数据问题
        setLabelsList(prevList => [...prevList, {
            color: label.color,
            id: label.id,
            name: label.name,
            textColor: label.textColor
        }]);
    }
}

关键说明： #

• some()方法会遍历数组，只要找到一个id匹配的元素就返回true，能高效判断重复
• 使用setLabelsList(prevList => ...)这种函数式更新方式，是因为React的state更新是异步的，直接用labelsList可能拿到的是旧值，函数式更新能确保基于最新的state来修改
• 如果你的业务场景需要用多个字段（比如name+color）来判断重复，只需要把some()里的条件改成对应的多字段比对即可，但id作为唯一标识是最稳妥的选择

JSX渲染部分不需要做任何修改，保持原样即可。

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