React Native-嵌套数组到平面列表

Question

我试图创建一个平面列表，以列表格式/样式显示用户的所有顺序，在这个平面列表中，我使用的是嵌套数组，然后将此嵌套在平面列表中。< / p>

嵌套数组中的所有项目都在我的 AsyncStorage 函数中调用，该函数是一个获取项目。

  

问题是我的计算机中没有显示任何数据/项目   平面清单。在我的console.log中，它说： “ getData”未定义。

这是我的代码：

ModalScreen.js

export default class ModalScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: props.modalVisible,
            textQty: '',
        };
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            modalVisible: nextProps.modalVisible,
            OG_id: nextProps.id,
            OG_price: nextProps.price
        })
    }    
    async setItem () {
        try {
            AsyncStorage.setItem('Key_1', this.state.textQty);
            AsyncStorage.setItem('Key_2', this.state.OG_id);
            AsyncStorage.setItem('Key_3', this.state.OG_price);
            Alert.alert("Saved");
        } catch(error) {
            console.log("Error saving data" + error)
        };
    };
    render() {
        return (
                    <View>
                        <View>
                            <Text>{this.state.OG_id}</Text>
                            <Text>{this.state.OG_price}</Text>
                            <TextInput
                                style={styles.textInput}
                                placeholder="Enter Quantity!"
                                onChangeText = {(value) => this.setItem(value) }
                                returnKeyLabel = "done"
                                returnKeyType = "done"
                                value = { this.state.textQty }
                            />
                            <TouchableOpacity onPress = { this.setItem }>
                                <Text>Send</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                             onPress = {() => { this.props.setModalVisible(false) }}>
                                <Text>Close</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
        )
    }
}

Settlement.js

export default class Settlement extends Component {
    constructor(props) {
        super(props);
        this.state = {
            details: [
                {
                    getDet: [],
                    Det_id: [],
                    Det_price: [],
                },
            ]
        }
    }

    async GetItem() {
        try {
            const value_1 = await AsyncStorage.getItem('Key_1');
            const getDet = [ ...this.state.getDet, value_1 ];
            this.setState({ getDet });

            const value_2 = await AsyncStorage.getItem('Key_2');
            const getID_Det = [ ...this.state.getID_Det, value_2 ];
            this.setState({ getID_Det });

            const value_3 = await AsyncStorage.getItem('Key_3');
            const getPrice_Det = [ ...this.state.getPrice_Det, value_3 ];
            this.setState({ getPrice_Det });
        } catch(error) {
            console.log("Error retrieving data" + error);
        };

    render() {
        return (
            <View>
                <Text>List</Text>
                <TouchableOpacity onPress = { this.GetItem }>
                    <Text>Show</Text>
                </TouchableOpacity>
                <FlatList
                    style = { styles.list }
                    data = { this.state.details }
                    keyExtractor={(item, index) => index.toString()}
                    renderItem = {({ item, index }) =>
                        <View>
                            <View style = { styles.listItemCont }>
                                <Text>{ this.state.getDet }</Text>
                                <Text>{ this.state.getID_Det }</Text>
                                <Text>{ this.state.getPrice_Det }</Text>
                            </View>
                            <View style = { styles.hr }/>
                        </View>
                    }
                />
            </View>
        )
    }
}