使用平面列表中的选定项目更新状态

Question

我有一组图像，可以使用 flatlist 显示这些图像。我想要一个功能，当你点击一张图片时，它应该显示在一个单独的视图中。

下面是我的代码片段：

const [selectedImage, setSelectedImage] = useState(joy);
const [imageSet, setImageSet] = useState([joy,anger,concern,depression]);
return (
<SafeAreaView>
    <View style={{width: 100, height: 400}}>
      <Image style={{height: 50, width: 50}} source={selectedImage} />
    </View>
    <FlatList
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    data={imageSet}
    renderItem={({item, index}) => (
        <View>
          <TouchableOpacity
              onPress={(item) => {
              setSelectedImage(item);    // trying to select the image here
              }}>
                <Image
                source={item}
                key={index}
                style={{
                  width: 60,
                  height: 60,
                  resizeMode: 'contain',
                }}
              />
          </TouchableOpacity>
        </View>
    )}
    />
</SafeAreaView>
);

但是点击它时没有显示图像。我无法弄清楚问题是什么。请帮忙。

Answer 1

我在您的代码中看到的问题是，您正在将项目从未定义的 TouchableOpacity onPress 传递给 setSelectedImage。这就是图像未设置到您的状态的原因。

试试这个：

之前:

<TouchableOpacity
   onPress={(item) => { <--- Remove this item!!
   setSelectedImage(item)}}>

之后：

 <TouchableOpacity
       onPress={() => { 
       setSelectedImage(item)}}>