javascript - 将值返回给调用者函数

Question

我需要在状态值previewImage上设置图像 URI，但问题是该值在函数内部。我需要从函数内部获取图像 URI 并将其返回给调用者函数以将其保存在状态中。

这是被调用的组件

const ImageDisplay = (images, onPress) => {
    
return (
  {images.map((image, index) => (
    <TouchableOpacity onPress={onPress(image)}>
      <Image source={{uri: image}} />
    </TouchableOpacity> 
  ))}
);

这是调用上述内容的组件

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

这就是对它从组件内部获得的值所做的事情

const viewImage = (uri) => {
  setPreviewImage(uri);
  console.log(uri)
}

问题是我在控制台上看到的值不是图像的 URI，而是一堆数据，即Class {...}

如何从组件内部获取图像 URI，然后将其返回给调用方组件？

标签： javascriptreactjsreact-nativeexpo

Answer 1

您应该通过您的代码在第一次渲染中声明一个函数，它将运行：

const ImageDisplay = (images, onPress) => {
  const pressHandler = () => onPress(image);
    
  return (
    <>
      {images.map((image, index) => (
        <TouchableOpacity onPress={pressHandler}>
          <Image source={{uri: image}} />
        </TouchableOpacity> 
      ))}
    </>
  );
};