我有一个名为Players
的父组件,它在数组上迭代,并为数组中的每个玩家呈现一个Player
组件,它还传递了一个deletePlayer()
函数,该函数现在只记录玩家。Player.tsx
的每个示例都会呈现球员的名字,如果单击该名字,它应该将showDeleteDialog
设置为true
,这将打开删除对话框
在此之后,如果用户单击第一个按钮,它应该使用特定的播放器执行deletePlayer()
函数。
现在问题来了-现在我的代码总是console. logs相同的播放器,无论我点击哪个名字,但只有当我从模态执行deletePlayer()
函数时才会发生这种情况。
<Pressable onPress={() => setShowDeleteDialog(true)}><Text>{player.name}</Text></Pressable>
其中:
<Pressable onPress={() => deletePlayer(player)}><Text>{player.name}</Text></Pressable>
这意味着我从React Native模态调用deletePlayer()
会在某种程度上影响deletePlayer()
的功能。
有人知道为什么会这样吗?
Players.tsx
常数玩家:=()=〉{const [显示删除对话框,设置显示删除对话框]=使用状态(假)
const deletePlayer = (player) => {
console.log(player)
}
return (
<View>
{players.map((player) => (
<Player
player={player}
key={player.id}
deletePlayer={deletePlayer}
showDeleteDialog={showDeleteDialog}
setShowDeleteDialog={setShowDeleteDialog}
/>
))}
</View>
);
};
我也有一个deletePlayer()
函数和一个showDeleteDialog
布尔值,我也会将它们传递下去。
在Player.tsx
中,我有以下代码:
常量播放器:=({播放器,删除播放器,显示删除对话框,设置显示删除对话框})=〉{
return (
<>
<Pressable onPress={() => setShowDeleteDialog(true)}><Text>{player.name}</Text></Pressable>
{showDelete && (
<Modal animationType="fade" transparent onRequestClose={onDismiss} {...rest}>
<InnerContainer innerWidth={innerWidth!}>
<Text>Delete?</Text>
<View>
<Button
title="Yes"
onPress={() => deletePlayer(player}
/>
<Button
title="No"
onPress={() => setShowDeleteDialog(false)}
/>
</View>
</InnerContainer>
</Modal>
)}
</>
);
};
我已经应用了我目前的代码,并尝试了我能想到的一切。
1条答案
按热度按时间kknvjkwl1#
这是因为你传递相同的函数给每个组件,这会导致相同的播放器值,而不是为每个播放器组件创建这个函数。