React中Uncaught TypeError: e.preventDefualt is not a function报错求助

你的报错和页面刷新问题根源很简单——拼写错误：你在handleSubmit里写的e.preventDefualt()是错的，正确的方法名是e.preventDefault()（注意是Default，不是Defualt，少了一个字母l）。

因为React表单提交事件的Event对象中只存在preventDefault()方法，调用一个不存在的方法自然会抛出Uncaught TypeError，而阻止页面刷新的逻辑没执行，所以表单提交后页面会默认刷新。

修正后的NewTodoForm代码如下：

import { useState } from "react"

export function NewTodoForm({onSubmit}){
    const [newItem, setNewItem] = useState("")
    
    function handleSubmit(e) {
        // 修正拼写错误
        e.preventDefault()
        if (newItem === "") return
        onSubmit(newItem)
        setNewItem("")
    }
    
    return (
        <form className="new-item-form" onSubmit={handleSubmit}>
            <div className="form-row">
                <label htmlFor="item"> New Item</label>
                <input value={newItem} onChange={e => setNewItem(e.target.value)} type="text" id="item"></input>
            </div>
            <button className="btn">
                Add
            </button>
        </form>
    )
}

另外提一个无关报错但可以优化的点：你在todos.map里把key放在了<li>上，但外面套了个空的<>，虽然禁用了ESLint的jsx-key检查，但其实没必要用空Fragment，直接返回<li>即可，或者把key移到<>上（写成<React.Fragment key={todo.id}>），这样更符合React的规范。

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