連想配列をfetchしたいがUnhandled Runtime Error

Question

前提・実現したいこと

reactで非同期通信によりjsonを取得し表示したいですが、下記のエラーになります。
原因、対応方法がわかる方ご教示お願いいたします。

発生している問題・エラーメッセージ

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: [object Promise]).  
 If you meant to render a collection of children, use an array instead.

該当のソースコード

const CSV = () => {
  async function getJson() {
    const res = await fetch('https://script.googleusercontent.com/macros/echo?user_content_key=v5nAejLstPehuklsZmNJPa9QDqUp1Bk02DeXyF5HMdzNHqzk5ojX-B9wIFKxnIy9JsJd1Gi5_jeTBPfLQvNdZ4wh2j6q_DHsm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnFKfE7MeVBE3mJAOQZdw2vGGe1QohVrhsCYtd5Xm2mrGuvs5Gzq5Johck3wUpibyKTOmbnRGq-tk&lib=MSp2QuS9Md5bx-zXxd-nCTnk9R_C2Jzti')
    const jsonData = await res.json()
    return jsonData
  }
  return (
    <>
      {getJson()}
    </>
  )
}

補足情報（FW/ツールのバージョンなど)

"next": "9.5.3",
"react": "16.13.1",

fetch先のリンクは問題なくjsonを取れてきています

Answer 1

reactはよくわからないのですが、普通のjsでやるとこう

<script>
const CSV = () => {
  async function getJson() {
    const res = await fetch('https://script.googleusercontent.com/macros/echo?user_content_key=v5nAejLstPehuklsZmNJPa9QDqUp1Bk02DeXyF5HMdzNHqzk5ojX-B9wIFKxnIy9JsJd1Gi5_jeTBPfLQvNdZ4wh2j6q_DHsm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnFKfE7MeVBE3mJAOQZdw2vGGe1QohVrhsCYtd5Xm2mrGuvs5Gzq5Johck3wUpibyKTOmbnRGq-tk&lib=MSp2QuS9Md5bx-zXxd-nCTnk9R_C2Jzti')
    const jsonData = await res.json()
    return jsonData
  }
  return getJson();
}
(async()=>{
  console.log(await CSV());
})();
</script>

CSVが返すのはpromiseなので、呼び出し側をasyncとしてawaitで呼び出すことです

Comments

[Akihide]

呼び出し側もasyncなんですね。。
ありがとうございます。
勉強になりました。解決です。