Реагируйте на собственные поля обновления приставки с помощью API

Question

У меня есть два файла, один дочерний компонент Calculator.js и родительский компонент App.js, которые я пытаюсь соединить вместе с использованием собственного встроенного приведения.

Дочерний компонент выглядит следующим образом:

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
  this.getApi();
    return (
        <View style={styles.formContainer}>
        <Text style={styles.fieldTitles}>Rate Calculator</Text>
        <View style={styles.field}>
            <Text>Mode of{"\n"}Payment</Text>
            <View style={{backgroundColor: '#ecf0f1', marginBottom: 10 }}>
            <Picker
                selectedValue={this.props.modeOfPayment}
                style={{ height: 50, width: 200}}
                onValueChange={(itemValue) => this.props.changeModeOfPayment(itemValue)}>
                <Picker.Item label="Monthly" value="monthly-payment" />
                <Picker.Item label="Annual" value="annual-payment" />
            </Picker>
            </View>
        </View>
        <View style={styles.field}>
            <Text style={styles.calculatorStyle}>Coverage</Text>
            <Text style={styles.calculatorStyleAmount}>{this.props.coverage}</Text>
        </View>
        <View style={styles.field}>
            <Text style={styles.calculatorStyle}>Face Amount</Text>
            <Text style={styles.calculatorStyleAmount}>{this.props.faceAmount}</Text>
        </View>
        <View style={styles.field}>
            <Text style={styles.calculatorStyle}>Premiums</Text>
            <Text style={styles.calculatorStyleAmount}>{this.props.premiums}</Text>
        </View>
        <View style={styles.field}>
            <Text style={styles.calculatorStyle}>Total Premium</Text>
            <Text style={styles.calculatorStyleAmount}>{this.props.totalPremium}</Text>
        </View>
    </View>
    );
  }
}

function mapStateToProps(state) {
    return {
        modeOfPayment: state.modeOfPayment,
        coverage: state.coverage,
        faceAmount: state.faceAmount,
        premiums: state.premiums,
        totalPremium: state.totalPremium,
        firstName: state.firstName,
        lastName: state.lastName,
        DOB: state.DOB,
        ageNearest: state.ageNearest,
        gender: state.gender,
        smoker: state.smoker,
        advisorName: state.advisorName,
        advisorPhoneNumber: state.advisorPhoneNumber,
        advisorEmail: state.advisorEmail
    }
}

function mapDispatchToProps(dispatch) {
    return {
        getApi: () => dispatch({ type: 'GET_API' }),
        changeModeOfPayment: (itemValue) => dispatch({ type: 'CHANGE_MODE_OF_PAYMENT', payload: itemValue})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Calculator)

, а родительский компонент имеет компоненты-редукты:

const reducer = (state = initialState, action) => {
    switch(action.type) {
        case 'CHANGE_MODE_OF_PAYMENT':
            return {...state, modeOfPayment: action.payload}
        case 'GET_API':
            quotePromise.then((quote) => {
            return {...state, totalPremiums: quote.totalPremiums.annualPremiumsCents}
            }
            );
    }
    return state
}

const store = createStore(reducer)

Моя цель - вызвать API и обновить текстовые поля this.props.coverage / faceAmount / premiums в дочернем компоненте.Мой код API выглядит следующим образом:

const getQuote = () => {
  return fetch('https://staging.testcompany.ca/quotes', {
    method: 'POST',
    headers: {
      "x-api-key": 'b3242e0c9-43-461a-341-23',
      "Accept": 'application/json',
      "Content-Type": 'application/json',
    },
    body: JSON.stringify({
      "ageNearest": 63,
      "gender": "FEMALE",
      "smokerStatus": "SMOKER",
      "plan": "DEFERRED_ELITE_TERM",
      "term": "LEVEL_TEN",
      "faceAmount": 50000
    })
  })
    .then((response) => response.json())
    .catch((error) => {
      console.error(error);
    });
};

const quotePromise = getQuote();
quotePromise.then((quote) => {
  console.log(`Quote retrieved. Total annual premiums: $${quote.totalPremiums.annualPremiumsCents / 100}`)
}
);

При вызове API значения тела будут меняться в соответствии с текущими состояниями.Как я могу реализовать это так, чтобы текстовые значения менялись и перерисовывались каждый раз, когда меняются значения тела и вызывается API?Буду ли я размещать код вызова API в родительском компоненте или дочернем компоненте?В вышеприведенном примере я попытался вызвать this.getApi () в дочернем компоненте, прежде чем он рендерится, чтобы переключить переключатель, чтобы получить значения обещания, но, похоже, он не работает.У кого-нибудь есть предложения?