Next JS待办列表应用空字符串添加问题求助

问题根源分析 #

1. 提交未做空值校验：点击提交按钮时，无论userinput是否为空，都会直接添加到待办列表。
2. 输入处理逻辑错误：handlechange仅在输入非空时更新userinput，但初始状态userinput为空，用户未输入直接提交就会加入空字符串；且onChange事件中调用e.preventDefault()完全多余。
3. 删除逻辑有缺陷：用todolist.indexOf(todo)判断索引，若列表存在重复项，会误删所有相同内容的项。

修复后的代码 #

import { useState } from "react"
import '../styles/globals.css'

const Index = ()=> {
    const [userinput, setuserinput] = useState("")
    const [todolist, settodolist] = useState([])

    const handlechange = (e)=>{
        // 实时更新输入值，去除首尾空格避免无效项
        setuserinput(e.target.value.trim())
    }

    const handlesubmit = (e)=> {
        e.preventDefault()
        // 仅输入非空时添加到列表
        if(userinput){
            settodolist([
                userinput,
                ...todolist
            ])
            // 添加后清空输入框
            setuserinput("")
        }
    }

    const handledelete = (index)=>{
        // 通过索引精准删除对应项，避免重复项误删
        const updatedList = todolist.filter((_, idx) => idx !== index)
        settodolist(updatedList)
    }

    return(
        <div className="FLEX">
            <h3 className="heading">Welcome to Next JS To Do app</h3>
            <form className="FORM" onSubmit={handlesubmit}>
               <div className="Wrap">
                    <input 
                        type="text" 
                        value={userinput}
                        onChange={handlechange} 
                        placeholder="Enter a todo item" 
                        className="INPUT"
                    />
                    <button type="submit" className="Button">Submit</button>
               </div>
            </form>
            <ul>
                {
                    todolist.length > 0 ? todolist.map((todo, idx)=>{
                        return (
                            <li key={idx}>
                                {todo} 
                                <button onClick={()=> handledelete(idx)}>Delete</button>
                            </li>
                        )
                    }) : "Enter a Todo List"
                }
            </ul>
        </div>
    )
}

export default Index

关键修改说明 #

• 受控组件优化：给input绑定value={userinput}，确保输入框内容与状态同步；用trim()去除首尾空格，避免纯空格的无效待办项。
• 提交校验：提交时先判断输入是否为空，非空才添加到列表，添加后自动清空输入框。
• 删除逻辑修复：通过传递索引删除项，即使有重复内容，也只会删除点击的那一个。
• 表单规范优化：将提交事件绑定到<form>的onSubmit上，符合HTML表单默认行为。

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