【ReactNative開発】fetch APIの戻り値 (response) がundifinedになる

こんにちは。今日も今日とてReactNativeでの開発に苦しんでいます。ReactNative、というかJavaScriptの根本的なところで苦しんでいるのですが・・・笑

今日もまたひとつ躓きがあったので、記録を残しておきます。

問題

JavaScriptのfetchを使ってAPIの呼び出しを行なった際の戻り値を確認したかったのですが、console.logで表示させてもundefinedになってしまいました。

    const url = '呼び出すURL';
    await fetch (url, {
        method: 'POST',
        headers:{
              XXXXX....
        },
        body:formData
    })
    .then((response) => {
         response.json()
    })
    .then((data)=>{
        console.log(data); //Undefinedになってしまう！
        console.log("## API SUCCESSUFLLY CALLED")
    })
    .catch((error) => {
        console.log("## API CALL FAILED")
        alert(error)
    })

原因と解決方法

こちらのサイトが参考になりました。

react native – fetch response.json() gives responseData = undefined – Stack Overflow

if you do a callback with curly braces you need to return response.json(). The simplified form response => response.json() has an implicit return statement in it. 

なるほど。thenの中を{}を使って書いている場合には、response.json()の結果を明示的にreturnしないとダメみたいです。ちなみに{}を使わずに書くことで、暗黙的なreturnが行われて、簡易にやりたいことが実現できるようです。

今回は、上のコードのresponse.json()の前にreturnを追加して無事に戻り値が表示されるようになりました！

    const url = '呼び出すURL';
    await fetch (url, {
        method: 'POST',
        headers:{
              XXXXX....
        },
        body:formData
    })
    .then((response) => {
         return response.text() //returnを追加！
    })
    .then((data)=>{
        console.log(data); //結果が返ってくるようになった！
        console.log("## API SUCCESSUFLLY CALLED")
    })
    .catch((error) => {
        console.log("## API CALL FAILED")
        alert(error)
    })

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。