reactjs - React マッピングを使用して JSON からデータを取得する

Question

これはおそらく簡単に答えられる質問だと思いますが、数時間経ってもわかりません。この JSONをマップしようとしていますが、「props.shows.map」は関数ではないと言い続けていますが、別のビットのデータでも同じことが機能します。データから「id」や「name」などを取得しようとしています。

マッピングは次のリンクで機能します: https://api.tvmaze.com/search/shows?q=\%22Terrance%20House\%22

機能しない/情報を取得できないように見える JSON は次のとおりです: https://api.tvmaze.com/shows/34275/episodes

import Layout from '../components/MyLayout'
import fetch from 'isomorphic-unfetch'
import Link from 'next/link'


const ShowLink = ({ show }) => (
    <li key={show.id}>
          <Link as={`/episode/${show.id}`} href={`/episodes/id=${show.id}`}>
            <a>{show.name}</a>
          </Link>
             <style jsx>{`
                li {
                    list-style: none;
                    margin: 5px 0;
                }

                a { 
                    text-decoration: none;
                    color: blue;
                    font-family: "Arial";
                }

                a:hover {
                    opacity: 0.6;
                }
             `}</style>
   </li>
)
/*
    <h1>{props.show.name}</h1>
         <p>{props.show.summary.replace(/<[/]?p>/g, '')}</p>
         <img src={props.show.image.medium}/>
*/
const Post =  (props) => (
    <Layout>
    <h1>Terrace House Episodes</h1>
        <ul>
            {props.shows.map(({show}) => (
                <ShowLink key={show} value={show} />
            ))}
        </ul>
    </Layout>
)

Post.getInitialProps = async function () {
   //const { id } = context.query
   //const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
   //const show = await res.json()
   //const res = await fetch(`http://api.tvmaze.com/seasons/34275/episodes`);
    const res = await fetch('https://api.tvmaze.com/shows/34275/episodes');
    const data = await res.json()

    return {
      shows: data
    }
}

export default Post