非Expo环境下React Native ImagePicker两次选图才显示问题求助

你的问题核心是React useState的异步更新特性导致的：

• 调用setImage(data)后，image变量不会立刻更新，仍保持更新前的空字符串值。
• 第一次执行uploadImage时，if(image)判断不成立，setPost不会执行，post数组里的image字段还是空，所以图片不显示。
• 第二次选图时，image存储的是第一次选的uri，此时if(image)成立，post被更新，图片才正常显示。

方案1：移除冗余的image状态（推荐） #

直接在获取到图片uri后更新post状态，跳过中间的image变量，彻底避免异步更新的问题：

const uploadImage = async (index: number) => { 
  setLoading1(true)
  const res = await launchImageLibrary({
    mediaType: 'mixed',
    quality: 1
  })
  
  if(!res.didCancel){
    const data = res.uri || res.assets?.[0]?.uri
    if(data){
      setPost(prevPost => {
        const updatedPost = [...prevPost]
        updatedPost[index] = {
          ...updatedPost[index],
          image: data 
        }
        return updatedPost 
      })   
    }
  }
  
  setLoading1(false)
}

方案2：保留image状态，用useEffect监听更新 #

如果需要保留image状态做其他用途，可以通过useEffect监听image的变化，同步更新post：

import { useEffect, useState } from 'react'

// 新增状态记录当前操作的索引
const [currentIndex, setCurrentIndex] = useState<number | null>(null)

// 监听image变化，同步更新post
useEffect(() => {
  if(image && currentIndex !== null){
    setPost(prevPost => {
      const updatedPost = [...prevPost]
      updatedPost[currentIndex] = {
        ...updatedPost[currentIndex],
        image: image 
      }
      return updatedPost 
    })
  }
}, [image, currentIndex])

// 修改uploadImage函数
const uploadImage = async (index: number) => { 
  setLoading1(true)
  const res = await launchImageLibrary({
    mediaType: 'mixed',
    quality: 1
  })
  
  if(!res.didCancel){
    const data = res.uri || res.assets?.[0]?.uri
    setCurrentIndex(index)
    setImage(data)
  }
  
  setLoading1(false)
}

优先推荐方案1，它减少了状态冗余，逻辑更直接，也避免了异步更新带来的潜在问题。

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