react-native - 如何将项目 ID 传递给 Swipeable 以删除或编辑具有此 ID 的项目

Question

我正在使用：react-native，expo，

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

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

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

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

所以，我不明白我应该如何将约会 ID 传递给 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>
    )
}

标签： react-nativereact-swipeable-views

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