reactjs - Nextjs 在异步函数调用后无法设置状态
问题描述
我有一个 Nextjs 表单,其中包含 FirstName 、 Age 和上传图片的位置等字段。填充表单并上传图像后(此时使用 URL.createObjectURL() 将上传的文件保存在状态变量中,工作正常),我想做以下步骤:
首先将状态变量中的图像上传到云服务器。
上传完成后,获取图像 url 和 setForm 以及其余字段。
//helper function to upload images to Cloudinary server uploadImageToCloudinary(imageFile) .then((res)=>{ setForm({ ...form, "picUploaded" : "true", //hard coded value for testing "profilePic" : res.url //url is retrieved here successfully }); //run validationafter upload to make sure required fields are there let errs = validate(); setError(errs); })
验证码
const validate= () => {
console.log(form.picUploaded);// Output : true
let err = {};
if(!form.firstName){
err.firstName= 'First Name is required.';
}
if(!form.lastName){
err.lastName= 'Last Name is required.';
}
if(!form.profilePic){ //Issue : Profile pic is not set here
err.profilePic= 'Profile Pic is required.';
}
return err;
}
问题:上传的图片 url 未在表单(字段 profilePic)中设置,但设置了硬编码值 picUploaded。有人可以指导我在这里缺少什么。
解决方案
问题是您在 setForm 调用之后立即运行验证,它是异步的,因此您的验证将命中以前的表单值,而不是新的。
为避免这种情况,您需要像这样单独运行验证。
useEffect(() => {
setError(validate())
}, [form])
这将在每次表单更新时运行验证,这取决于用例,您可能想要也可能不想要。
uploadImageToCloudinary(imageFile)
.then((res)=>{
setForm({
...form,
"picUploaded" : "true", //hard coded value for testing
"profilePic" : res.url //url is retrieved here successfully
});
})
推荐阅读
- ios - 如何用一个字符替换字符串中的所有数字
- angular - npm install 没有加载正确的包
- amcharts - chap of chart dose not appropriate amChart
- javascript - TypeError:将循环结构转换为 JSON 以获取 shell 脚本结果
- r - ggplot2: Violin Plot with Stat="Identity"
- css - 使用 CSS 在图像上添加 3D 效果
- c# - 如何防止线程的两个副本重复方法和变量
- html - 无容器居中无序列表
- azure-iot-hub - Azure IoT 中心 - 使用 C SDK 实现密钥翻转
- java - 乘法表,询问直到所有正确答案