如何在React任务列表中实现重复任务拦截功能？

原代码的核心问题 #

原提交校验逻辑完全无效，tasks > text是数组和字符串做无意义的比较，text === setTasks是拿输入文本和状态更新函数对比，这两个条件都无法检测任务是否重复。

修正后的完整代码 #

import React from 'react'
import { useState } from 'react'

const App = () => {
    const [tasks, setTasks] = useState([
        { id: 1, text: 'Task1' }, { id: 2, text: 'Task2' }, { id: 3, text: 'Task3' }
    ])
    
    // 添加key属性避免React警告
    const showTasks = tasks.map((task) => (
        <h2 key={task.id}>
            {task.text}
            <button onClick={() => onDelete(task.id)}>X</button>
        </h2>
    ))

    // 用函数式更新获取最新状态，避免闭包问题
    const onDelete = (id) => {
        setTasks(prevTasks => prevTasks.filter(task => task.id !== id))
    }

    const [text, setText] = useState('')

    const onSubmit = (e) => {
        e.preventDefault()
        // 校验空值 + 检查是否已有重复任务
        const trimmedText = text.trim()
        if (!trimmedText) {
            alert('请输入任务内容');
            return
        }
        const isDuplicate = tasks.some(task => task.text.trim() === trimmedText)
        if (isDuplicate) {
            alert('该任务已存在');
            return
        }
        addTask({ text: trimmedText })
        setText('')
    }

    // 同样用函数式更新获取最新状态
    const addTask = (task) => {
        const id = Math.floor(Math.random() * 10000) + 1;
        const newTask = { id, ...task };
        setTasks(prevTasks => [...prevTasks, newTask]);
    }

    return (
        <div>
            <div>{showTasks}</div>

            <form onSubmit={onSubmit}>
                <input type='text' value={text} onChange={(e) => setText(e.target.value)} />
                <input type='submit' value='Save Task' />
            </form>

        </div>
    )
}

export default App

关键修正点 #

• 重复任务校验：用tasks.some()遍历现有任务，对比输入文本（做了trim处理，避免空格导致的误判），判断是否存在重复
• 状态更新优化：所有setTasks改用函数式更新（prevTasks => ...），确保拿到最新的任务列表状态，避免闭包导致的旧状态问题
• React规范修复：给map生成的任务项添加key属性，消除React控制台警告
• 空值校验优化：对输入文本做trim处理，避免纯空格的无效任务提交

内容的提问来源于stack exchange，提问作者דניאל אילוז