【ReactNative開発】API呼び出しの結果が{“_U”: 0, “_V”: 0, “_W”: null, “_X”: null}になる

こんにちは。今日は、React Native (Java Scriptも同様）でのAPI呼び出しで躓いたエラーについて、解決方法と合わせて整理しておこうと思います。

問題

React Nativeで、APIを呼び出して結果を取得しようとすると、{“_U”: 0, “_V”: 0, “_W”: null, “_X”: null}が返される事象が発生していました。HTTPレスポンスステータスは200なのに、なんでだろうと悩む・・・

問題のコードはこちら。

★関数名★ = async() => {
        const params = {
            xxxx:'xxxxx'
        };
        const url = 'APIのURL';
        await fetch (url, {
            method: 'POST',
            headers:{
                  'yyyy':'zzzz',
                   ......
            },
        })
        .then((response) => {
            console.log(response.json())
        })
        .catch((error) => {
            alert(error)
        })
    }

解決法

Stack Overflowで解決方法が見つかった。

mysql – fetch API always returns {“_U”: 0, “_V”: 0, “_W”: null, “_X”: null} – Stack Overflow

どうやら、response.json()が解決される前にconsole.logが動いているため、とのことらしい。

解決するには、一度response.json()を実行し、それが完了したのち (.then()を使って）console.logなり、値を取り出せば問題ない模様。

これでうまくいった！

★関数名★ = async() => {
        const params = {
            xxxx:'xxxxx'
        };
        const url = 'xxxxxxxx';
        await fetch (url, {
            method: 'POST',
            headers:{
                  'yyyy':'zzzz',
                   ......
            },
        })
        .then((response) => response.text())
        .then((data)=>{
            console.log(data)
        })
        .catch((error) => {
            alert(error)
        })
    }

おしまい！

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

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

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