GETAPIレスポンスのJSONから取得した値を画面上に表示したいが、できない

next.jsでフロントwebappの開発をしています。
get APIのレスポンスの値を使って、画面を表示したいのですがうまくいきません。ご教授いただきたいです。

以下試したことです。

・レスポンスをconsolo.log(JSON.stringify(posts))で出力してみたところ、APIのレスポンスは取得できていました。以下の形でした。
{"Post":[{"id":"61e、、、、、},{"id":"61e、、、、、},{"id":"61e、、、、、},]}

・JSONを配列の形にして、mapで要素の表示をしたかったので、
JSONからの治し方がおかしいのかと思い、以下色々チャレンジしてみましたが、どれもうまくいきませんでした。
const json =JSON.stringify(props.result)
const json =JSON.parse(props.result)
const json =JSON.parse(JSON.stringify(props.result))
const json = Object.entries(JSON.parse(JSON.stringify(props.result)))
const json =Object.entries(JSON.stringify(props.result))
const json = Object.value(JSON.parse(JSON.stringify(props.result)))
const json =Object.value(JSON.stringify(props.result))
const json = [JSON.parse(JSON.stringify(props.result))]
const json = [JSON.stringify(props.result)]

ソースコード

export default function Home({ allPostsData, post }) {
  const result = getPosts()
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
      </section>
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <ul className={utilStyles.list}>
          <Post result={result}>
          </Post>
        </ul>
      </section>
    </Layout>
  )
}
async function getPosts() {
  const url = "http://localhost:8000/api/post?count=5&lastPostId=null";
  const params = { method: "GET" };
  const response = await fetch(url, params);
  const posts = await response.json()
  return posts
}

export default function Post(props) {
  const json = Object.entries(JSON.parse(JSON.stringify(props.result)))
//jsonに入る値を色々試してみた。
  console.log("Post側の確認1" + props.result)
  console.log("Post側の確認1" + json)
  console.log("Post側の確認2" + JSON.parse(JSON.stringify(props.result)))
  console.log("Post側の確認3" + Object.entries(JSON.stringify(props.result)))
  console.log("Post側の確認4" + [JSON.parse(JSON.stringify(props.result))])
  console.log("Post側の確認5" + JSON.stringify(props.result))
  console.log("Post側の確認6" + JSON.parse(props.result))

  return (
    <li>
      {json.map(post => (
        <Card style={{ width: '40rem' }}>
          {/* {if(class=){ }} */}
          <Link href="./userPosts">
            rio
          </Link>
          <Card.Img variant="top" src={post.imageUrl} />
          <Card.Body>
            <Card.Text>
              ❤️{post.favosCount} 件 コメント{post.commentsCount} 件
            </Card.Text>
            <Card.Title>{post.title} </Card.Title>
          </Card.Body>
        </Card>
      ))}
    </li>
  )
}

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

getPosts は非同期処理なので、const result = getPosts() とはできません (というか、result には Promise という、非同期処理の結果を後で受け取るためのオブジェクトが返ります) ので、useState と useEffect を使って次のように書く必要があります。

js
1import { useState, useEffect } from 'react';
2
3export default function Home({ allPostsData, post }) {
4  const [result, setResult] = useState();
5
6  useEffect(() => {
7    async function fetchData() {
8      const result = await getPosts();
9      setResult(result);
10    }
11    fetchData();
12  }, []);
13
14  return (
15    // 以下略

また、最初にレンダリングされるときはまだ API の結果が取得できてないため result が undefined なので、Post コンポーネントは次のように条件付き表示にすると良いでしょう。

jsx
1          {result && <Post result={result} />}

そして、Post に result をまるごと渡すのであれば、result は { Post: [記事の配列] } というオブジェクトなので、Post はこんな感じでしょうか。

js
1export default function Post(props) {
2  const json = props.result.Post;
3
4  return (
5    // 以下略

(Home の引数は必要なんだろうか？とか、Post というコンポーネントは名前が単数形なのでひとつの記事を表示するものにするか、複数形の Posts にしたほうが良いのでは？とか、Post の引数は result をまるごと渡すよりも post またはその配列を渡して、受け取るときの引数は params じゃなくて { post } で受け取ったほうが、とか、getPosts で JSON をパース済みなのに Post でさらに JSON.parse したくなるのはなぜ？とか、いろいろ突っ込みどころはありますが、まぁいいや…。)

投稿2022/05/05 03:58