评论提交失败求助：前端代码排查（后端Postman测试正常）

提交评论时屏幕闪烁但评论未发布，Postman测试后端功能正常，问题出在前端代码里，主要有两个问题：

1. 表单默认提交未阻止 #

handleSubmit函数里的e.preventDefaul()拼写错误，正确写法是e.preventDefault()。这个错误会导致点击提交时浏览器触发默认表单提交行为，直接刷新页面，前端的请求还没完成就被中断，所以评论提交失败，同时出现屏幕闪烁的现象。

2. useEffect依赖冗余 #

你的useEffect依赖数组里包含了setContent和setErrors，这两个是React内置的状态更新函数，本身是稳定不变的，不需要加入依赖数组，否则会引发组件不必要的重渲染。

修复后的代码 #

useEffect(() => {
    if(!loggedIn) {
        navigate.push('/login')
    }
    return () => {
        setErrors([])
    }
}, [loggedIn, navigate]) // 移除不必要的依赖

const handleSubmit = (e) => {
    e.preventDefault(); // 修正拼写错误
    const newContent = {
        content: content,
        blog_id: blog.id
    }
    fetch('/comments', {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(newContent)
    })
    .then(resp => resp.json())
    .then(data => {
        if(data.errors) {
            setErrors(data.errors)
        } else {
            addComment(data)
        }
    });
}

修复后重新测试提交，页面不会再刷新，评论应该能正常提交到后端并更新前端列表。如果还有问题，可以打开浏览器控制台的Network标签，查看请求的状态码和返回数据，排查是否有其他隐藏问题。

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