向调用方函数返回一个值

Question

我需要在状态值上设置图像URIpreviewImage，但问题是该值在函数内部。我需要从函数内部获取图像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，然后将其返回给调用方组件

Answer 1

您正在调用onPress，而不是将其作为函数传递。您想要：

images.map(image => (
<TouchableOpacity onPress={() => onPress(image)}>
<Image source={{uri: image}} />
</TouchableOpacity> 
)

这假设images是一个字符串数组。

Answer 2

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

const ImageDisplay = (images, onPress) => {
const pressHandler = () => onPress(image);

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