Установка defultValue компонента TextField пользовательского интерфейса материала в React

Я разрабатываю приложение React JS. Что я сейчас делаю, так это асинхронно получаю данные с сервера и визуализирую значения в TextField. Я знаю, как это делать, и мой подход тоже работает. Но мне просто не нравится мой нынешний подход.

Это рабочий подход

class TestComponent extends React.Component {

    constructor(props)
    {
        super(props);
        this.fetchName = this.fetchName.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            name : ''
        }
    }


    fetchName()
    {
        //get the name asynchronously from the server. I am using Axios
        this.setState({ name : nameValueFromTheServer })
    }


    handleChange(e)
    {
        this.setState({ name : e.target.value })
    }

    render()
    {
        return (
            <MuiThemeProvider>
            <div>
                <TextField onChange={this.handleChange} label="Name" value={this.state.name} />
            </div>
            </MuiThemeProvider>
        )
    }
}

Что мне не нравится в вышеупомянутом подходе, так это то, что мне нужно реализовать метод handleChange для получения значения входного значения. Если я этого не использую, я не могу изменить входное значение имени, потому что значение состояния не изменилось. Чтобы получить простое входное значение, мне нужно написать дополнительные строки кода. В jQuery я просто получаю такое входное значение, $ (selector) .val (). Без реализации метода handleChange я могу использовать ссылку вот так.

<TextField inputRedf={(input) => this.tfName = input } label="Name" />

Затем я получаю значение динамически следующим образом.

this.tfName.value

Проблема с использованием ссылки заключается в установке значения по умолчанию, которое асинхронно загружается с сервера.

Я могу установить такое значение по умолчанию для TextField

<TextField inputRedf={(input) => this.tfName = input } defaultValue={this.state.name} label="Name" />

Обратите внимание на атрибут defaultValue в приведенном выше коде. Когда я устанавливаю значение с помощью defaultValue, начальное значение состояния имени будет установлено в текстовое поле. Но мы все равно можем изменить входное значение имени, вводимого из пользовательского интерфейса, даже если мы не реализуем событие handleChange. Но проблема в том, что я получаю данные асинхронно и динамически устанавливаю this.state.name.

Итак, в конструкторе компонента состояние имени пусто. Затем я установил его в обратном вызове асинхронного вызова. Но значение defaultValue можно установить только один раз. Таким образом, поле ввода всегда отображается пустым. Я хотел бы знать, как я могу динамически установить значение по умолчанию для TextField? Причина, по которой я использую ref, заключается в том, что я не хочу реализовывать событие onChange, а также отслеживать состояние сброса входного значения. Если бы я мог установить значение defaultValue динамически, я бы просто динамически использовал значение в обратном вызове асинхронного вызова. Как лучше всего упростить этот сценарий?