Return useState 默认为 onPress 之后

Question

我正在为我的 React Native 应用程序的提示编写自定义模式。我希望模式在单击图像时出现。因此，我向图像添加了一个 onPress 以更改状态值。当状态值为真时，我希望显示模态。状态成功变为真。但是，我希望它在模式关闭后切换回 false。

我尝试从组件内部更改值，但它会引发错误，因为我正在导入组件，并将值作为 props 传递。以下是我的资料：

const [showPrompt, setShowPrompt] = useState(false)

 const show =() => {
        setShowPrompt(true);
        setShowPrompt(false)
        console.log(showPrompt)
    }

<TouchableOpacity onPress={show}>
                <Image source={{uri: imageSource}} style={{height:130, width:150}}/>
                <Text style={{color:'white', textAlign:'center', fontSize:16, fontFamily:fonts.nunitoRegular}}>{title}</Text>
            </TouchableOpacity>

  {showPrompt && <CustomPrompt 
                            open={modalVisible} 
                            onClose={()=> setModalVisible(!modalVisible)} 
                            openModalText={()=>setModalVisible(true)} 
                            /> 
                            
                            }

Answer 1

尝试useCallback()

setShowPrompt(true);
//the time between these 2 operations is just a Boolean value assignment, 
//that is, it is only a few milliseconds and you would be able to view
//the rendering
setShowPrompt(false);

import React, {useState, useCallback} from 'react'

const show = useCallback(() => {
  setShowPrompt(!showPrompt);
  
  console.log(showPrompt)
}, [showPrompt]);

<TouchableOpacity onPress={show}>
     <Image source={{uri: imageSource}} style={{height:130, width:150}}/>
     <Text 
         style={{
         color:'white', 
         textAlign:'center', 
         fontSize:16, 
         fontFamily:fonts.nunitoRegular}}>
         {title}
     </Text>
</TouchableOpacity>

Return useState 默认为 onPress 之后

Return useState to default afer onPress

react-native

use-state