时间戳

首页 > 解决方案 > 如何在组件功能中打开模型？

javascript - 如何在组件功能中打开模型？

问题描述

我尝试这种方法打开一个模式，但它不起作用：

const Item = ({ title, details,  }) =>{ 
const [detModel, setdetModal]= useState(false)
return(
<View>
<TouchableOpacity onPress={setdetModal(true)} >
<View style={styles.firstitem} >
  <Text style={styles.title} >{title}</Text>
</View>
</TouchableOpacity>
 //  this is the modal who i want to open it if user press in the touchableOpacity
<Modal visible={detModel}>
<Ionicons name="ios-arrow-round-back" size={42} style={styles.colsemodal} color="black" onPress= 
{setdetModal(false)}/>
<Text>{title}</Text>
<Text>{details}</Text>
</Modal>
</View>
 )} ;

但我收到了这个错误：

太多的重新渲染。React 限制了渲染的数量以防止无限循环。

如何使用 state 方法打开此模式。

标签： javascriptreact-native

解决方案

<TouchableOpacity onPress={setdetModal(true)} >

在这里，您当前setdetModal正在渲染 JSX 时调用该方法，从而导致重新渲染并因此导致循环。

相反，您应该传递一个箭头函数。

<TouchableOpacity onPress={() => setdetModal(true)} >

所有其他onPress处理程序也是如此。

推荐阅读