オッサンはReact Hooksで非同期で取得した値を初期値としてinputにセットします。

IndexedDBなどから非同期で取得したデータをinputなどのデフォルト値として表示したかったけど、なかなか上手くいかなかったオッサンです。

最終的には下記の様にkeyを切り替える事でなんとか実現しました。

React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！

import React, { useState, useEffect } from 'react';
import {GetKeywoed} from '../Services/IndexedDbService' 

import TextField from '@material-ui/core/TextField';


export default function Sample() {

    const [keyword, setKeyword] = useState('');

    useEffect(() => {

        (async () => {      
            //非同期でデータを取得
            const ret = await GetKeywoed();
            setKeyword(ret.keyword);
          })();
    
      },[]);
      
    return (
        <div>
            <TextField
                label="キーワード"
                key={keyword === '' ? 'key1': 'key2'} //取得前と後でkeyを変える
                variant="outlined"
                InputLabelProps={{shrink: true,}}
                defaultValue={keyword}
                onBlur={e => setKeyword(e.target.value)}
            />
        </div>
    )
}