渲染组件固定次数（异步）

Question

我想以相同的次数渲染一个相同的组件（由用户输入），一次又一次（异步）。为此，我将以下函数作为props方法使用，其中while循环用于使代码异步运行，并且只有在状态变量 componentRendered 变为 true 后才能继续执行，但不起作用。有人可以帮忙解决这个问题。预先感谢。

HomeScreen.js

import {View, Text} from 'react-native';
import Stepper from '../components/Stepper';

class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      componentRendered: false,
    };
  }

  setComponentRender = () => {
    this.setState({componentRendered: true});
  };

  render() {
    var stepperElement = [];
    for (let i = 1; i <= 2; i++) {
      stepperElement.push(
        <Stepper setComponentRender={this.setComponentRender} />,
      );
      while (this.state.componentRendered === false) {}
      this.setState({componentRendered: false});
    }
    return <View>{stepperElement}</View>;
  }
}

export default HomeScreen;

Stepper.js

import {View, TextInput, Text, Alert} from 'react-native';
import {ProgressSteps, ProgressStep} from 'react-native-progress-steps';

class Stepper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
    };
  }

  static navigationOptions = {
    header: null,
  };

  defaultScrollViewProps = {
    keyboardShouldPersistTaps: 'handled',
    contentContainerStyle: {
      flex: 1,
      justifyContent: 'center',
    },
  };

  onNextStep = () => {
    console.log('called next step');
  };

  onPaymentStepComplete = () => {
    Alert.alert(
      'Payment completed!',
      'Your Payment is Successful',
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {text: 'OK', onPress: () => console.log('OK Pressed')},
      ],
      {cancelable: false},
    );
  };

  onPrevStep = () => {
    console.log('called previous step');
  };

  onSubmitSteps = () => {
    console.log('called on submit step.');
    this.props.setComponentRender();
  };

  render() {
    return (
      <View style={{flex: 1, marginTop: 50}}>
        <ProgressSteps>
          <ProgressStep
            label="Payment"
            onNext={this.onPaymentStepComplete}
            onPrevious={this.onPrevStep}
            scrollViewProps={this.defaultScrollViewProps}>
            <View style={{alignItems: 'center'}}>
              <Text>Payment step content</Text>
            </View>
          </ProgressStep>
          <ProgressStep
            label="Confirm Order"
            onPrevious={this.onPrevStep}
            onSubmit={this.onSubmitSteps}
            scrollViewProps={this.defaultScrollViewProps}>
            <View style={{alignItems: 'center'}}>
              <Text>Confirm order step content</Text>
            </View>
          </ProgressStep>
        </ProgressSteps>
      </View>
    );
  }
}

export default Stepper;