React存入Firebase Storage下载url到state首次调用失效问题

问题原因 #

• React 中的 setState 类更新方法是异步批量执行的，调用 setImageUrl(url) 后，当前函数作用域内捕获的 imageUrl 属于本次渲染的闭包变量，值不会立刻发生变化，因此你在 setImageUrl 后立即打印的 imageUrl 仍然是更新前的旧值，并不是没有存入state。
• 你感知到的「第二次调用才正常存储」，本质是第一次调用结束后组件触发了重渲染，第二次调用时函数作用域捕获的 imageUrl 已经是第一次更新后的值，所以打印结果看起来是第二次才生效，实际上第一次调用结束后state已经完成了更新，只是你读取的时机不对。

验证和修复方案 #

1. 可以通过 useEffect 监听 imageUrl 的变化确认更新成功：

useEffect(() => {
  // 这里会在imageUrl更新完成后触发，能拿到最新值
  console.log("最新的imageUrl：", imageUrl)
}, [imageUrl])

2. 如果你的提交逻辑后续需要用到上传得到的url，不需要依赖state，直接在 handleImageAdd 中返回url，在 handleSubmit 中接收使用即可，避免异步更新的时序问题：
   修改handleImageAdd：

const handleImageAdd = async(e) => {     
  console.log("adding image...") 
  const storageRef = storage.ref('images')
  const fileRef = storageRef.child(image.name)
  await fileRef.put(image)
  const url = await fileRef.getDownloadURL()
  setImageUrl(url)
  return url // 新增返回url
}

修改handleSubmit中调用部分：

const handleSubmit = async (e) => {
  setSubmitLoading(true)
  e.preventDefault()
  console.log("submitting form...") 
  const imgUrl = await handleImageAdd() // 直接拿到url使用
  // 后续提交逻辑直接用imgUrl即可，不需要读取state里的imageUrl
  console.log("form submitted!")
  setSubmitLoading(false)
}

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