React表单：仅成功提交时刷新页面，验证错误时阻止刷新

你的代码存在两个核心问题导致需求未实现：验证逻辑的判断错误，以及未处理fetch请求的异步成功回调。以下是具体修正方案：

1. 修复表单验证判断逻辑 #

原代码中const errors = setFormErrors(validate(formState));的写法错误——React状态setter函数setFormErrors返回值为undefined，导致if (errors)的判断永远不生效。正确流程是先获取验证结果，再更新错误状态，最后判断是否存在错误：

function submitForm(event) {
    event.preventDefault();
    // 先获取验证错误结果
    const errors = validate(formState);
    // 更新错误状态
    setFormErrors(errors);
    
    // 通过错误对象的键长度判断是否存在验证错误
    if (Object.keys(errors).length !== 0) {
        return; // 有错误则终止后续提交流程
    }

    // 无错误时提交数据
    const data = formState;
    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    };

    // 处理异步请求，成功后执行表单重置或页面刷新
    fetch('http://localhost:8000', options)
        .then(response => {
            if (response.ok) {
                // 方案1：无刷新重置表单（推荐，用户体验更流畅）
                setFormState({ flaire: '', title: '', text: '', fireLevel: '' });
                setIsLit(null); // 重置火焰图标选中状态
                setFormErrors({}); // 清空错误提示
                
                // 方案2：若必须刷新页面，用下方代码替代上面的重置逻辑
                // window.location.reload();
            }
        })
        .catch(error => {
            console.error('提交失败:', error);
            // 可在此添加提交失败的用户提示
        });
}

2. 修复Cancel按钮的类型与逻辑 #

你的Cancel按钮设置为type="submit"会触发表单提交，需改为type="button"，并添加表单重置逻辑：

<button 
    className="blogPostCancel" 
    type="button"
    onClick={() => {
        setFormState({ flaire: '', title: '', text: '', fireLevel: '' });
        setIsLit(null);
        setFormErrors({});
    }}
>
    CANCEL
</button>

关键改动说明 #

• 验证逻辑：先获取错误对象再更新状态，通过Object.keys(errors).length准确判断是否存在验证错误
• 异步处理：fetch为异步操作，必须在then回调中处理提交成功后的动作（重置表单或刷新页面）
• 取消按钮：改为button类型避免误触表单提交，同时添加表单重置逻辑

修改后即可实现：验证不通过时显示错误、页面保持不刷新；提交成功后要么无刷新重置表单，要么刷新页面，完全匹配你的需求。

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