如何在更新的情况下处理图像必填字段，react js

Question

我使用react hook表单上传文件，我的文件上传字段是：

<input
className={`form-control ${
errors["cover_image"] ? "border-red-500" : ""
}`}
type="file"
id="cover_image"
{...register("cover_image")}
onChange={handleChange}
/>

我的验证是：

cover_image: Yup.mixed()
.test("name", "Cover Image is required", (value) => {
return value[0] && value[0].name !== "";
})
.test("fileSize", "File must be less than 2MB", (value) => {
return value[0] && value[0].size <= 2000000;
})
.test("type", "Only image are supported", (value) => {
return value[0] && value[0].type.includes("image");
}),

它在创建页面的情况下运行良好，在未上传时显示为必填项，但在编辑页面的情况中，如果我没有上传任何文件，则显示为必填字段。item.cover_image上有一个文件值。

我也尝试过defaultValue={item.cover_image}，但在编辑时不允许设置默认值。处理这种情况的最佳方式是什么？

Answer 1

我建议使用react-hook-form的验证，而不是使用外部包进行验证

import { useForm } from 'react-hook-form'
export default function App() {
const { register, handleSubmit, formState } = useForm()
console.log({ errors: formState.errors })
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input
type="file"
{...register('cover_image', {
validate: value => {
const isExists = !!value.length
const isGoodSize = value[0] && value[0].size <= 2000000
const isImageType = value[0] && value[0].type.includes('image')
if (!isExists) return "Cover Image is required"
if (!isGoodSize) return 'File must be less than 2MB'
if (!isImageType) return 'Only image are supported'
return undefined
}
})}
/>
<input type="submit" />
</form>
)
}