如何使用按钮单击获取平面列表上的数据？

Question

这是我第一个使用 React_native 的应用程序。

在我的应用程序中，我有一个平面列表。它是一个动态平面列表，该平面列表将与 API 数据一起列出。一旦平面列表更新用户可以更改数据（备注和有效性值）。如果用户更新了某些内容，我想在用户单击 NEXT 按钮后取回所有列表项（请参阅 ui image => Green Button）。

eg :（一旦用户点击绿色按钮就会生成以下内容）

[{
  description : "E",
  validity : "YES",
  Remark : "Hello"
},{
  description : "D",
  validity : "NO",
  Remark : "asddddd"
},,{
  description : "A",
  validity : "YES",
  Remark : "asdas"
},{
  description : "C",
  validity : "NO",
  Remark : "asdasd"
},{
  description : "B",
  validity : "YES",
  Remark : null
}]

我的用户界面如下，我在下面附上了我的代码，请帮助我找到解决方案。提前致谢。

用户界面

代码/

服务器响应

"ChecklistsDTOS": [
            {
                "chelistid": 231,
                "ireqstId": 5,
                "checklistName": "D",
                "validity": "Invalid",
                "remark": "asddddd"
            },
            {
                "chelistid": 228,
                "ireqstId": 5,
                "checklistName": "A",
                "validity": "Valid",
                "remark": "asdas"
            },
            {
                "chelistid": 230,
                "ireqstId": 5,
                "checklistName": "C",
                "validity": "Valid",
                "remark": "asdasd"
            },
            {
                "chelistid": 229,
                "ireqstId": 5,
                "checklistName": "B",
                "validity": "Invalid",
                "remark": null
            },
            {
                "chelistid": 232,
                "ireqstId": 5,
                "checklistName": "E",
                "validity": "Invalid",
                "remark": null
            }
        ],

InspectionCheckList.tsx

import React, { useState, useEffect } from "react";
import {
    StyleSheet,
    View,
    Text,
    FlatList,
    ActivityIndicator
} from 'react-native';
// import Picker2 from "react-native-community/picker";
import ComponentStyles, { COLORS, FONT_FAMILY } from "../../../../constants/Component.styles";
import ActionButton from "../../../../components/ActionButton";
import InspectionCheckListItem from './InspectionCheckListRow';
// importing database
import Database from '../../../../database/Database';
// singleton object
import InspectionChecklistDataManagert from '../../../../models/InspectionChecklistModel';

type props = {}

const InspectionCheckList = props => {
    const db = new Database();
    let checkListSingleton = InspectionChecklistDataManagert.getInstance();
    //add new array that will carry the yes values
    const [arrayOfYes, setArrayOfYes] = useState([]);

    const [checkLisItems, setCheckListItems] = useState({
        isLoading: true,
        checklistData: null,
    });

    useEffect(() => {
        db.getCheckListByReferenceNumber(props.referenceNumberForCheckList).then((data) => {
            console.log("999999999999999999999o9 : " + JSON.parse(data._checklist));
            setCheckListItems({
                isLoading: false,
                checklistData: JSON.parse(data._checklist),
            });
        }).catch((err) => {
            console.log(err);
        })
    }, []);

    //Modify yes clicked by pushing the clicked yes into the new array
    const yesClicked = (element) => {
        setArrayOfYes([...arrayOfYes, element]);
    }

    //Modify no clicked by remove the clicked no if it exists in the array
    const noClicked = (element) => {
        const index = arrayOfYes.findIndex(x => x.chelistid === element.
            chelistid)
        if (index !== -1) {
            //Remove the element from the array
            var modifiedArray = [...arrayOfYes]
            modifiedArray.splice(index, 1);
            setArrayOfYes(modifiedArray)
        }
    }

    const previousTab = () => {
        props.navigation.navigate('Location confirmation');
    }

    const nextTab = () => {
        // props.navigation.navigate('Photo upload');
        updateSingleton();
    }

    const updateSingleton = () => {
        let data = {
            "chelistid": 232,
            "ireqstId": 5,
            "checklistName": "E",
            "validity": "Invalid",
            "remark": null
        }
        checkListSingleton.setCheckList(arrayOfYes);
        console.log("%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% " + JSON.stringify(checkListSingleton.getCheckList()));
        console.log("################# " + JSON.stringify(arrayOfYes));
    }


    if (checkLisItems.isLoading) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator size='large' />
            </View>
        )
    }

    return (
        <View style={styles.mainContainer}>
            <View style={styles.columnView}>
                <Text style={styles.contentTitle}>Inspection of pharmacies</Text>
                <Text style={styles.contentSubTitle}>Checklist:</Text>

                <View style={styles.rowView}>
                    <View style={{ flex: 1, alignSelf: 'center' }} >
                        <Text style={styles.tableText}>Description</Text>
                    </View>
                    <View style={{ flex: 1, alignSelf: 'center' }} >
                        <Text style={styles.tableText}>Validiry</Text>
                    </View>
                    <View style={{ flex: 1, alignSelf: 'center' }} >
                        <Text style={styles.tableText}>Remark</Text>
                    </View>
                </View>
            </View>

            <View style={ComponentStyles.SEPARATE_LINE} />

            <View style={{ flex: 4 }}>
                <FlatList
                    showsHorizontalScrollIndicator={false}
                    data={checkLisItems.checklistData}
                    renderItem={({ item }) => {
                        return (
                            <InspectionCheckListItem
                                itemData={item}
                                yesClicked={() => yesClicked(item)}
                                noClicked={() => noClicked(item)}
                                //now check if the current item exists in the array by finding the index
                                isYesButtonEnabled={arrayOfYes.findIndex(x => x.chelistid === item.
                                    chelistid) !== -1} //If the index = -1 that means the item doesn't exist 
                                isNoButtonEnabled={arrayOfYes.findIndex(x => x.chelistid === item.
                                    chelistid) == -1} //If The element is not yes then it is no
                            />
                        );
                    }}
                    keyExtractor={item => `${item.chelistid}`}
                />
            </View>

            <View style={styles.actionButton}>
                <ActionButton
                    title={'Previous'}
                    color={COLORS.PINK}
                    customBtnStyle={{
                        height: 65,
                        width: '85%',
                    }}
                    onPress={() => previousTab()}
                />
                <ActionButton
                    title={'Next'}
                    color={COLORS.GREEN_42}
                    customBtnStyle={{
                        height: 65,
                        width: '100%',
                    }}
                    onPress={() => nextTab()}
                />
            </View>

        </View>
    );
}

const styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
        flexDirection: 'column'
    },
    contentTitle: {
        fontSize: 20,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.REGULAR,
    },
    contentSubTitle: {
        fontSize: 20,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.BOLD,
    },
    contentText: {
        flex: 3,
        fontSize: 12,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.LIGHT,
    },
    columnView: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    rowView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: '5%'
    },
    tableText: {
        fontSize: 20,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center'
    },
    actionButton: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'flex-end',
        position: 'relative',
        bottom: '2%',
        left: 0,
    }
});

export default InspectionCheckList;

InsprctionCheckListItem.tsx

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, TextInput } from 'react-native';
import { COLORS, FONT_FAMILY } from '../../../../constants/Component.styles';

type props = {
    isYesButtonEnabled?: boolean;
    isNoButtonEnabled?: boolean;
    yesClicked?: () => void;
    noClicked?: () => void;
}

const InsprctionCheckListItem = props => {
    return (
        <View style={styles.container}>
            <View style={{ flex: 1, alignSelf: 'center' }} >
                <Text style={styles.allText}>{props.itemData.checklistName}</Text>
            </View>
            <View style={{ flex: 1, flexDirection: 'row', alignSelf: 'center', justifyContent: 'center' }} >
                <TouchableOpacity style={props.isYesButtonEnabled ? styles.yesButtonClicked : styles.touchButton} onPress={props.yesClicked}>
                    <Text style={styles.touchButtonWithoutClick}>YES</Text>
                </TouchableOpacity>
                <TouchableOpacity style={props.isNoButtonEnabled ? styles.noButtonClicked : styles.touchButton} onPress={props.noClicked}>
                    <Text style={styles.touchButtonWithoutClick}>NO</Text>
                </TouchableOpacity>
            </View>
            <View style={{ flex: 1 }} >
                <TextInput style={styles.textInput} onChangeText={props.changedText} defaultValue={props.itemData.remark}/>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        marginTop: '3%',
    },
    allText: {
        fontSize: 20,
        color: COLORS.BLUE_2C,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center'
    },
    textInput: {
        fontSize: 20,
        color: COLORS.BLUE_2C,
        fontFamily: FONT_FAMILY.LIGHT,
        borderRadius: 5,
        backgroundColor: COLORS.WHISPER,
    },
    checkboxText: {
        fontSize: 12,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center',
        margin: '1%'
    },
    touchButton: {
        width: 80,
        height: 40,
        borderRadius: 5,
        borderWidth: 0.8,
        borderColor: COLORS.ASH_AE,
        justifyContent: 'center',
        alignSelf: 'center',
        textAlign: 'center',
        margin: '0.2%',
        backgroundColor: COLORS.ASH_AE,
    },
    yesButtonClicked: {
        width: 80,
        height: 40,
        borderRadius: 5,
        borderWidth: 0.8,
        borderColor: COLORS.GREEN_42,
        justifyContent: 'center',
        alignSelf: 'center',
        textAlign: 'center',
        backgroundColor: COLORS.GREEN_42,
    },
    noButtonClicked: {
        width: 80,
        height: 40,
        borderRadius: 5,
        borderWidth: 0.8,
        borderColor: COLORS.PINK,
        justifyContent: 'center',
        alignSelf: 'center',
        textAlign: 'center',
        backgroundColor: COLORS.PINK,
    },
    touchButtonWithoutClick: {
        fontSize: 14,
        color: COLORS.WHITE,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center',
        textAlign: 'center'
    },
    touchButtonWithClick: {
        fontSize: 14,
        backgroundColor: COLORS.PINK,
        color: COLORS.WHITE,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center',
        textAlign: 'center'
    }
});

export default InsprctionCheckListItem;

Answer 1

当您点击下一步按钮时，我不完全知道您需要向 API 发送什么，您能告诉我更多详细信息吗？ “FlatList”数据是什么意思？您想要每个组件中的文本吗？你想要FlatList的什么数据？ 如果您只想要他们arrayOfYes，您需要将其发送到 API 并且您已准备好。 等待您的反馈意见。谢谢 :)。