React Native中从子组件获取图片URI并传递至父组件设置previewImage状态的问题解决

我看到你遇到的问题了，主要是两个小错误导致的：

错误1：子组件的props参数定义错误 #

React 组件接收的是单个props对象，而不是分开的参数。你现在写的const ImageDisplay = (images, onPress) => {会把第一个参数当成整个props对象，第二个参数onPress会是undefined，这会导致后续逻辑出现异常。

错误2：TouchableOpacity的onPress触发时机错误 #

你当前的写法onPress={onPress(image)}会在组件渲染的时候立即执行onPress(image)，而不是在用户点击按钮的时候执行。这就是为什么控制台打印出奇怪的Class对象——因为渲染时就调用了viewImage，此时的执行上下文和点击时完全不同。

修正后的完整代码 #

子组件（ImageDisplay）修正：

const ImageDisplay = ({ images, onPress }) => { // 解构props对象，获取images和onPress
  return (
    <> {/* 用Fragment包裹map返回的元素，避免额外DOM节点 */}
      {images.map((image, index) => (
        <TouchableOpacity 
          key={index} // 列表元素必须添加唯一key，用image唯一ID会比index更优
          onPress={() => onPress(image)} // 用箭头函数包裹，点击时才调用onPress并传入image
        >
          <Image source={{uri: image}} />
        </TouchableOpacity>
      ))}
    </>
  );
};

父组件的调用和处理函数保持不变：

<ImageDisplay images={images} onPress={viewImage} />

const viewImage = (uri) => {
  setPreviewImage(uri);
  console.log(uri); // 现在会正确打印图片URI字符串
};

额外说明： #

1. key属性的必要性：React列表渲染时必须给每个元素添加唯一key，这能避免渲染警告，同时提升列表更新的性能。如果你的图片数据有专属的唯一ID，用ID替代index会更稳妥。
2. Fragment的作用：map返回的多个兄弟元素需要被容器包裹，React Fragment（<></>）是最轻量的选择，不会在DOM中生成额外节点。

这样修改后，当你点击图片时，对应的URI就会正确传递给父组件的viewImage函数，顺利更新previewImage状态了。

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