Как передать идентификатор элемента в Swipeable, чтобы удалить или изменить элемент с этим идентификатором

Question

Я использую: react-native, expo,

response-native-gesture-handler / Swipeable

вот код экрана https://github.com/ArturScwaiberov/react-native-dental-app/blob/master/screens/HomeScreen.js

В моем приложении есть список встреч, отображаемых с помощью SectionList.

В renderItem я создал две кнопки, одна из них предназначена для удаления элемента.

Итак, я не могу понять, как следует Я передаю идентификатор встречи в renderRightActions, чтобы удалить или отредактировать текущую встречу ... пожалуйста, помогите мне найти решение!

Вот мой обзор кода HomeScreen:

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

Вам нужно только передать идентификатор элемента в качестве параметра функции.

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>
    )
}