如何在模态组件中为文本呈现动态变量

Question

我正在寻找一种方法来呈现一个自定义变量，该变量是我从一个函数中设置的，每当单击Card按钮时，我都会调用该函数，该变量会进入一个Modal的主体，该主体应动态包含该特定变量的值。

包含所有内容的主要组件：

export function OrdiniPrecedenti({ navigation }) {
const [visible, setVisible] = useState(false);
var egDetails = ""
function showModal(details){
setVisible(true)
egDetails = details
}
const hideModal = () => setVisible(false);
const containerStyle = { backgroundColor: 'black', padding: 20 };
return (
<Provider>
<View style={{ flex: 1, justifyContent: 'center' }}>

<HeaderBar svgicon={BackArrow} funct={navigation.goBack} titletext="Ordini recenti"></HeaderBar>

<CardHistory text="I tuoi ordini recenti" paragraph="Qui saranno visualizzati tutti i tuoi ordini recenti" ></CardHistory>

<CardHistory text="Ordine #0001"
paragraph="Ristorante MA Sushi Milazzo"
indirizzo="Vico del Pittore, 32, 98057 Milazzo ME"
btntext="Visualizza dettagli ordine"
btfn={showModal("Hello")}>
</CardHistory>
<CardHistory text="Ordine #0002"
paragraph='Pizzeria "Verace Elettrica"'
indirizzo="Via Firenze, 98057 Milazzo ME"
btntext="Visualizza dettagli ordine"
btfn={showModal("Hellu")}>
</CardHistory>
<Portal>
<Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
<Text style={{ color: 'black' }}>
<CardHistory text={egDetails}>
</CardHistory>
</Text>
</Modal>
</Portal>
</View>
</Provider>
);
}

现在，正如您所看到的，我有一个egDetails变量，它的值是根据我在btfn道具中所做的调用设置的。然后，如果我启动该应用程序，我会得到一个Too many re-renders.错误，我尝试了很多方法来修复它，但最终我无法摆脱它。如果需要，这里是CardHistory组件：

export function CardHistory({ text, btntext, btfn, paragraph, indirizzo }) {
return (
<View>
<Card>
<Card.Content>
<Title>{text}</Title>
<Paragraph>{paragraph}</Paragraph>
<Paragraph>{indirizzo}</Paragraph>
</Card.Content>
<Card.Actions>
<Button onPress={btfn}>{btntext}</Button>
<Button></Button>
</Card.Actions>
</Card>
</View>
);
}

ps：(很抱歉缩进不正确，第一次格式化StackOverflow的js代码：(

Answer 1

通过计算渲染来查找哪个组件导致了过多的重新渲染。

有条件地使用渲染某些组件

<>
{isReadyToRender && <ComponentThatRendersTooManyTimesIfPropsChange />}
</>