如何避免React state数组存入重复值？解决includes判断不生效问题

原有代码存在的核心问题 #

• 直接修改state原值不符合React不可变更新规则：你直接调用exam.questions.push是原地修改state原始对象，没有调用setExam触发状态更新，React不会感知到状态变化，也不会触发重渲染。
• 对象引用匹配导致去重逻辑失效：includes对引用类型的判断是匹配内存地址，你数组中存储的是对象，即使两个对象的question内容完全一致，只要是不同的实例，includes都会返回false，所以去重不生效。

修正后的实现代码 #

const [exam, setExam] = useState({
    subjectName: "",
    questions: [], 
    notes: [""]
})

const [item, setItem] = useState([
    {
        question: "",
        answer: "",
        options: []
    }
])

const nextQuestion = (e) => {
    e.preventDefault()
    const que = item[0].question
    // 校验是否存在重复题目，按question字段内容匹配
    const isDuplicate = exam.questions.some(existQ => existQ.question === que)
    // 仅不重复、题目非空、且总数不超过15道时才添加
    if (!isDuplicate && que.trim() && exam.questions.length < 15) {
        // 不可变更新：生成新的questions数组，不修改原state
        const newQuestionItem = {
            question: que,
            answer: value,
            options: [item[0].options[1], item[0].options[2], item[0].options[3], item[0].options[4]]
        }
        setExam(prevState => ({
            ...prevState,
            questions: [...prevState.questions, newQuestionItem]
        }))
    }
}

额外优化提示 #

• 如果需要兼容题目前后有空格的场景，判断重复时可以统一做去空格处理：existQ.question.trim() === que.trim()
• 如果你用的value是外部状态，建议同步用闭包获取最新值，避免出现状态过期问题。

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