如何将项目 ID 传递到滑动式以删除或编辑具有此 ID 的项目

Question

我使用： react-native， expo，

反应原生手势处理程序/滑动

这是屏幕 https://github.com/ArturScwaiberov/react-native-dental-app/blob/master/screens/HomeScreen.js 的代码

在我的应用程序中，有由 SectionList 呈现的约会列表。

在渲染项中，我创建了两个按钮，其中一个是删除项目。

所以，我不明白我应该如何将约会ID传递给renderRightActions以删除或编辑此当前约会..请帮助我找出解决方案！

这是我的主屏幕代码审查：

const HomeScreen = ({ navigation }) => {
const [data, setData] = useState(null)
const [refreshing, setRefreshing] = useState(false)
const fetchAppointments = () => {
setRefreshing(true)
appointmentsApi
.get()
.then(({ data }) => {
setData(data.message)
setRefreshing(false)
})
.catch((e) => {
setRefreshing(false)
console.log(e)
})
}
useEffect(fetchAppointments, [])
const removeAppointment = (id) => {
console.log(id)
const result = data.map((group) => {
group.data = group.data.filter((item) => item._id !== id)
return group
})
setData(result)
//appointmentsApi.remove(id)
}
renderRightAction = (text, color, x, progress) => {
const trans = progress.interpolate({
inputRange: [0, 1],
outputRange: [x, 0],
})
const pressHandler = () => {
if (text === 'pencil') {
alert('hey')
} else {
//but how to get over here the ID of item from SectionList?
removeAppointment(id)
}
}
return (
<Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
<RectButton
style={{
alignItems: 'center',
flex: 1,
justifyContent: 'center',
backgroundColor: color,
}}
onPress={pressHandler}
>
<ActionText>
<Octicons name={text} size={24} color='white' />
</ActionText>
</RectButton>
</Animated.View>
)
}
renderRightActions = (progress) => (
<RightButtonsHandler>
{renderRightAction('pencil', '#B4C1CB', 160, progress)}
{renderRightAction('trashcan', '#F85A5A', 80, progress)}
</RightButtonsHandler>
)
return (
<Container>
<SectionList
style={{ paddingLeft: 20, paddingRight: 20 }}
sections={data}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (
<Swipeable renderRightActions={renderRightActions} friction={2}>
<Appointment navigation={navigation} item={item} />
</Swipeable>
)}
renderSectionHeader={({ section: { title } }) => <SectionTitle>{title}</SectionTitle>}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={fetchAppointments} />}
/>
<PluseButton
style={{
shadowColor: '#2A86FF',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
}}
onPress={() => navigation.navigate('AddPatient')}
>
<Ionicons name='ios-add' size={32} color='white' />
</PluseButton>
</Container>
)
}

Answer 1

您只需将项 ID 作为函数参数传递。

renderRightActions={(progress) => renderRightActions(progress, item.id)}

我做了所有更改。试试这个代码：

const HomeScreen = ({ navigation }) => {
const [data, setData] = useState(null)
const [refreshing, setRefreshing] = useState(false)
const fetchAppointments = () => {
setRefreshing(true)
appointmentsApi
.get()
.then(({ data }) => {
setData(data.message)
setRefreshing(false)
})
.catch((e) => {
setRefreshing(false)
console.log(e)
})
}
useEffect(fetchAppointments, [])
const removeAppointment = (id) => {
console.log(id)
const result = data.map((group) => {
group.data = group.data.filter((item) => item._id !== id)
return group
})
setData(result)
//appointmentsApi.remove(id)
}
renderRightAction = (text, color, x, progress, id) => {
const trans = progress.interpolate({
inputRange: [0, 1],
outputRange: [x, 0],
})
const pressHandler = () => {
if (text === 'pencil') {
alert('hey')
} else {
// but how to get over here the ID of item from SectionList?
removeAppointment(id) // its simple! :)
}
}
return (
<Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
<RectButton
style={{
alignItems: 'center',
flex: 1,
justifyContent: 'center',
backgroundColor: color,
}}
onPress={pressHandler}
>
<ActionText>
<Octicons name={text} size={24} color='white' />
</ActionText>
</RectButton>
</Animated.View>
)
}
renderRightActions = (progress, id) => (
<RightButtonsHandler>
{renderRightAction('pencil', '#B4C1CB', 160, progress, id)}
{renderRightAction('trashcan', '#F85A5A', 80, progress, id)}
</RightButtonsHandler>
)
return (
<Container>
<SectionList
style={{ paddingLeft: 20, paddingRight: 20 }}
sections={data}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (
<Swipeable renderRightActions={(progress) => renderRightActions(progress, item.id)} friction={2}>
<Appointment navigation={navigation} item={item} />
</Swipeable>
)}
renderSectionHeader={({ section: { title } }) => <SectionTitle>{title}</SectionTitle>}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={fetchAppointments} />}
/>
<PluseButton
style={{
shadowColor: '#2A86FF',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
}}
onPress={() => navigation.navigate('AddPatient')}
>
<Ionicons name='ios-add' size={32} color='white' />
</PluseButton>
</Container>
)
}