データベースの情報を元にReactでレンダリングを行う方法

Question

実現したいこと

いつもお世話になっております。

データベースにフロントエンドからリクエストを飛ばし
レスポンスの情報を元にHTMLを生成し、表示をさせるというのを実現したいです。
下記に現在使用している関数を記載します。

• リクエストを飛ばす関数(superagent)

/**
 * @param  {String} request_name
 * @return {Promise<String>} 
 */
static srcGen(request_name) {
        return new Promise((resolve, reject) => {
            request.post('/hoge')
                .responseType('arraybuffer')
                .query({ filename: request_name })
                .send(null)
                .end((err, res) => {
                    assert.ifError(err)
                    const blob = new Blob([res.body], { type: 'audio/mpeg3' })
                    const url = URL.createObjectURL(blob)
                    resolve(url)
                })
        })
    }

• レスポンスが帰ってきたらHTMLを生成しrenderしたい

srcGen('hoge')
.then((result) => {
    const albums = result.map(src => {
        return (
            <div>
                <audio src={src} className="audio"></audio>
            </div>
        )
    })
    // ここでrenderしたい
})
.catch(e => throw e)

処理方法などは上記の様な形式で無くても大丈夫です。
実現したい事はDBからのレスポンス -> HTML生成 -> レンダリングです。

初心者質問で申し訳ございません、ご回答宜しくお願い致します。

FW、DB

• React 16.3.1
• MongoDB 3.6

Answer 1

Answer 2

state プロパティで albums を管理すれば良いのではないでしょうか。

albums の有無によってレンダリング内容が切り替わるように render メソッドを書いておけば、
setState メソッドで albums を変更したときにレンダリング内容が切り替わると思います。

Comments

[nobodytolove123]

ご回答頂きましてありがとうございます！
確かにstateとsetState({obj : albums})で
実現出来ますね！