看板标题长度验证时useFormState出现异常错误求助

你的useFormState异常大概率是FormData值的类型不匹配导致的，具体来说：

formData.get("title")会返回string | null，而你用Zod定义的z.string()不接受null值。当用户绕过浏览器的required验证（比如通过JS提交空表单），formData.get("title")会返回null，Zod验证失败后返回的错误状态虽然结构正确，但可能在React序列化状态时引发异常；另外，即使输入非空但长度不足3，也可能因为类型处理的隐性问题触发状态更新异常。

修复步骤： #

1. 处理FormData的null值
   在服务器action中，将formData.get("title")转为空字符串，确保Zod接收的是字符串类型：

const validatedFields = CreateBoard.safeParse({
    title: formData.get("title") ?? "", // 把null转为空字符串
});

2. 确保状态结构完全一致
   客户端初始状态可以和服务器返回的错误状态结构对齐，避免潜在的序列化问题：

const initialState = { 
    message: null, 
    errors: { title: [] } // 明确title错误数组的初始值
}

3. 可选：补充错误信息渲染
   在客户端表单中添加错误提示，验证修复是否生效：

{state.errors.title?.length > 0 && (
    <p className="text-red-500">{state.errors.title[0]}</p>
)}

额外说明： #

服务器action中的redirect会终止函数执行，不会返回状态，这是正常的，不会导致useFormState异常，无需修改。

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