0

我知道这可能是一个很容易回答的问题，但几个小时后我无法弄清楚。我正在尝试映射这个 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
4

1 回答 1

1

问题是您在进行地图调用时试图解构 json 对象中不存在的属性（即“显示”属性）。

这是一个解构的例子（如果你不熟悉）：

const example= {
  show: 'Seinfeld',
};

const { show } = example;

在最后一行中，show属性取自示例对象并分配给名为 show 的变量（因此变量 show 将保存值“Seinfeld”）。

在下面的代码中，您还从 map 函数调用中的每个 json 对象中解构了一个名为 show 的属性：

props.shows.map(({show}) => (
            <ShowLink key={show} value={show} />
        ));

在工作 json 中，每个对象都有一个show:属性，它本身就是一个包含您想要的数据的对象。

在不工作的 json 中没有show:属性，因此您尝试访问一个不存在的属性，该属性将返回 null。

因此，要解决 url 无效的问题，您只需删除解构：

props.shows.map((show) => (
            <ShowLink key={show} value={show} />
        ));
于 2018-04-01T02:32:43.427 回答