React Native中useState存储image-picker多选图片URI报错

问题核心是状态类型完全不统一+更新/判断逻辑写法错误，具体如下：

• 初始状态定义错误：useState({})把初始值设为空对象，但实际存储的是图片uri，和对象类型完全不匹配。
• 状态更新逻辑分裂：选单图时执行setImages(...results)，直接把uri字符串赋值给images；选多图时又执行setImages([...results, ...images])，要求images是可展开的数组。对象、字符串、数组三种类型来回切换，后续操作必然报错。
• 渲染判断逻辑错误：images > 1是直接拿状态值和数字比较，无论images是对象、字符串还是数组，这个判断都不会得到预期结果，判断数组长度必须取length属性。
• 隐式闭包问题：直接在setImages里引用外层的images，多次触发选图时可能拿到旧的状态值，导致新选中的图片覆盖之前的内容。

核心思路是全程统一用数组存储图片uri，不要给单图/多图写分叉的赋值逻辑，不管选1张还是多张，都按数组规则处理：

1. 把初始状态改为空数组[]，从根源固定类型。
2. 统一状态更新逻辑，不管选中多少张图，都把新的uri追加/替换到数组中，推荐用函数式更新避免闭包问题。
3. 渲染层统一遍历数组渲染图片，不需要单独写单图的Image组件，数组长度为1时自然只渲染1张，长度为N时渲染N张。

修正后的完整代码：

选图逻辑 #

// 初始值改为空数组，统一存储格式
const [images, setImages] = useState([]);

const showImage = () => {
  launchImageLibrary(options, (response) => {
    if (response.didCancel) {
      console.log("User cancelled image picker");
      return;
    }
    if (response.error) {
      console.log("ImagePicker Error: ", response.error);
      return;
    }
    if (response.customButton) {
      console.log("User tapped custom button: ", response.customButton);
      return;
    }
    // 提取本次选中的所有图片uri
    const newImageUris = response.assets.map(asset => asset.uri);
    // 函数式更新，合并新旧图片（如果要每次选图替换旧内容，就改成setImages(newImageUris)）
    setImages(prevImages => [...prevImages, ...newImageUris]);
  });
};

注：launchImageLibrary的回调风格不需要加await，加了也不会等待回调执行完成，去掉即可。

渲染逻辑 #

{/* 统一遍历数组渲染，自动适配单图/多图场景 */}
{images.map((uri, idx) => (
  <Image
    key={idx}
    style={{ width: 150, height: 150 }}
    source={{ uri }}
  />
))}

如果需要加空状态提示，可以加长度判断：

{images.length === 0 && <Text>暂未选择图片</Text>}

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