如何从提取中返回数据？

Question

我想从提取中获取数据并以数组形式返回，但我不知道为什么数组为空。 如果console.log这个函数，它的写数组不为空，但是当我尝试将其呈现为select选项时，它为空

import React, { Component } from 'react'

export default class NameOfValuta extends Component {
constructor(props) {
    super(props);
    this.state = {
        name: "",
        nominal: ""
    }

    this.getData = this.getData.bind(this);
}

componentDidMount() {
    const valuteNames = this.getData();
    console.log(valuteNames);
}


getData() {
    const valuteNames = [];
    const api = "https://www.cbr-xml-daily.ru/daily_json.js";
    fetch(api)
        .then(res => res.json())
        .then((data) => {
            for (let item in data.Valute) {
                valuteNames.push(data.Valute[item].CharCode)
            }
        })

    return (valuteNames);

}

render() {
    const valuteNames = this.getData();
    return (
        <div>
            <OptionList items={valuteNames} />
        </div>
    )
}

}

function OptionList(props) {
const items = props.items;
const optionItems = items.map((item, index) => {
    return <option key={index}>{item}</option>
})

return <select>{optionItems}</select>

}