检索子组件以生成多维数组

Question

我想创建一个类似问题的东西。回答表单生成器。

我可以正确填充屏幕，添加和删除问题和答案，但我无法获得所有子组件状态。

这是我到目前为止所做的：

import React from 'react';
import {
    View, ScrollView, StyleSheet,
    TextInput
} from 'react-native';
import { Text, Button, Divider } from 'react-native-elements';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

export class Answer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            answer: this.props.answer
        }
    }
    render() {
        return <View style={{ margin: 5, padding: 5, borderRadius: 3, backgroundColor: "#ccc" }}>
            <Text style={{ padding: 5 }}>Answer #{this.props.count + 1}</Text>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                <TextInput
                    style={{ backgroundColor: '#fff', height: 30, padding: 5, borderRadius: 3, flexGrow: 1 }}
                    placeholder='Answer'
                    underlineColorAndroid="transparent"
                    onChangeText={(text) => this.setState({ answer: text })}
                    value={this.state.answer}
                />
                <Button title="-" style={{ width: 30, height: 30 }} borderRadius={5} backgroundColor="red" onPress={() => { this.props.removeAnswer(this.props.count) }} />
            </View>
        </View>
    }
}

export class Question extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: this.props.question.name,
            answers: []
        }
    }
    addAnswer = () => {
        var answersCurrent = this.state.answers
        answersCurrent.push("")
        this.setState({ answers: answersCurrent })
    }

    removeAnswer = (codigo) => {
        let arr = this.state.answers
        arr = arr.filter((answer, i) => {
            console.log(i)
            return i !== codigo
        })
        this.setState({ answers: arr })
    }

    render() {
        return <View style={{ margin: 5, padding: 5, borderRadius: 3, backgroundColor: "#ccc" }}>
            <Text style={{ padding: 5 }}>Question {this.props.count + 1}</Text>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                <TextInput
                    style={{ backgroundColor: '#fff', height: 30, padding: 5, borderRadius: 3, flexGrow:1 }}
                    placeholder='Question'
                    underlineColorAndroid="transparent"
                    onChangeText={(text) => this.setState({ name: text })}
                    value={this.state.name}
                />
                <Button title="-" style={{ width: 30, height: 30 }} borderRadius={5} backgroundColor="red" onPress={() => { this.props.removeQuestion(this.props.count) }} />
            </View>
            <Divider style={{ height: 5, backgroundColor: "transparent" }} />
            <Divider style={{ height: 1, backgroundColor: "#e8e8e8" }} />
            <Divider style={{ height: 5, backgroundColor: "transparent" }} />
            {this.state.answers.map((answer, i) => {
                return <Answer answer={answer} key={i} count={i} removeAnswer={this.removeAnswer.bind(this)} />
            })}

            <Divider style={{ height: 10, backgroundColor: "transparent" }} />
            <Divider style={{ height: 1, backgroundColor: "#e8e8e8" }} />
            <Divider style={{ height: 10, backgroundColor: "transparent" }} />
            <Button title="Add Answer" onPress={() => { this.addAnswer() }} />
        </View>
    }
}

export default class CreateForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
            questions: []
        }
    }


    getThings=()=>{
     //HERE!!
    }

    addQuestion = () => {
        var questionsCurrent = this.state.questions
        questionsCurrent.push({
            name: '',
            questions: {
                1: {
                    question: "",
                    answers: {
                        1: ""
                    }
                }
            }
        })
        this.setState({ questions: questionsCurrent })
    }

    removeQuestion = (codigo) => {
        let arr = this.state.questions
        arr = arr.filter((question, i) => {
            return i !== codigo
        })
        this.setState({ questions: arr })
    }

    render() {
        const { navigate } = this.props.navigation
        return <ScrollView style={styles.container}>
            <Text h4>Some title</Text>
            <Divider style={{ height: 10, backgroundColor: "transparent" }} />
            <Divider style={{ height: 1, backgroundColor: "#e8e8e8" }} />
            <Divider style={{ height: 10, backgroundColor: "transparent" }} />
            <TextInput
                style={{ backgroundColor: '#fff', height: 45, padding: 15, borderRadius: 20 }}
                placeholder='Project name'
                underlineColorAndroid="transparent"
                onChangeText={(text) => this.setState({ name: text })}
                value={this.state.email}
            />
            <Divider style={{ height: 10, backgroundColor: "transparent" }} />
            <Divider style={{ height: 1, backgroundColor: "#e8e8e8" }} />
            <Divider style={{ height: 10, backgroundColor: "transparent" }} />
            {this.state.questions.map((question, i) => {
                return <Question question={question} key={i} count={i} removeQuestion={this.removeQuestion.bind(this)} />
            })}
            <Divider style={{ height: 10, backgroundColor: "transparent" }} />
            <Divider style={{ height: 1, backgroundColor: "#e8e8e8" }} />
            <Divider style={{ height: 10, backgroundColor: "transparent" }} />
            <Button title="Add Question" onPress={() => { this.addQuestion() }} />
        </ScrollView>
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        padding: 20
    },
});

我想从CreateForm组件调用getThings（），因此能够生成以下内容：

completeForm:{
questions:{
1:{"question":'some question?',
   "answers":{
              1:'yes',
              2:'no'
             },
   },
2:{"question":'some other question?',
   "answers":{
              1:'maybe',
              2:'not sure',
              3:'as many answers as the user decides'
             },
    }
}

我不想使用redux，因为这是一个单屏应用程序。

关于如何实现这一目标的任何线索？