React Native array prop令人困惑

Question

我有两个部分，父母（ManySpace）和孩子（OtherComponent）。 OtherComponent为ManySpace道具渲染两个具有两个不同数组的manyspace组件。

我不使用const和let因为在这样的渲染范围之外使用变量

onSubmitEditing1 = () => {
    if (secondinput) { this.secondref.focus(); }
    else if (thirdinput) { this.thirdref.focus(); }
    else { Keyboard.dismiss(); }
};

MANYSPACE1和MANYSPACE2渲染是完美的，但是由于我如何解决此问题而使第一个ManySpace和第二个ManySpace组件数组内容感到困惑。 希望我能解释我的问题

import React, { Component } from 'react'; //and other imports
let MANYSPACE;
let icerik;
let firsttext;
let firstinput;
let answer1;
let answerlength1;
let secondtext;
let secondinput;
class ManySpace extends Component {
    render() {
        MANYSPACE = this.props.manyspace;
        icerik = MANYSPACE[0].icerik;
        firsttext = MANYSPACE[0].firsttext;
        firstinput = MANYSPACE[0].firstinput;
        if (firstinput) {
            answer1 = MANYSPACE[0].firstinput.answer1;
            answerlength1 = answer1.length;
        }

        secondtext = MANYSPACE[0].secondtext;
        secondinput = MANYSPACE[0].secondinput;
        if (secondinput) {
            answer2 = MANYSPACE[0].secondinput.answer2;
            answerlength2 = answer2.length;
        }
        return ()
    }
}

-我的其他组件

import React, { Component } from 'react'; //and other imports
const MANYSPACE1 = [
    {
        icerik: 'lorem ipsum',
        firsttext: 'lorem ipsum',
        firstinput: {
            answer1: 'lorem ipsum'
        },
        secondtext: 'lorem ipsum'
    }
];
const MANYSPACE2 = [
    {
        icerik:'lorem ipsum',
        firsttext: 'lorem ipsum',
        firstinput: {
            answer1: 'lorem ipsum'
        },
        secondtext: 'lorem ipsum',
        secondinput: {
            answer2: 'lorem ipsum'
        },
        thirdinput: {
            answer3: 'lorem ipsum'
        }
    }
];  
class OtherComponent extends Component {
    <ManySpace
        manyspace={MANYSPACE1}
    />
    <ManySpace
        manyspace={MANYSPACE2}
    />
}