Question

我正在尝试使用nextjs / react访问newsapi，但是“ TypeError：data.map不是函数”。

我尝试了以下一些关于stackoverflow的解决方案，但不适用于我的情况。

这是我的代码：

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

const Index = (props) => (
  <Layout>
    <h1>Batman TV sources</h1>
    <ul>
      {props.sources.map(source => (
        <li key={source.id}>
          <Link as={`/p/${source.id}`} href={`/post?id=${source.id}`}>
            <a>{source.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = async function() {
  const res = await fetch('https://api.tvmaze.com/search/sources?q=batman')
  //const res = await fetch('https://randomuser.me/api/?results=10')
  //const res = await fetch ('https://newsapi.org/v2/top-headlines?country=us')
  const data = await res.json()

  //console.log(`source data fetched. Count: ${data.length}`)

  return {
    sources: data.map(entry => entry.source)
  }
}

export default Index

，此处的SHORTED API数据如下： {“状态”：“确定”，“总计结果”：38，“文章”：[{“来源”：{“ id”：“ fox-新闻”，“名称”：“福克斯新闻”}，“作者”： “ Frank Miles”，“ title”：....}]}

我知道这是一个对象，但不是数组，而map（）对于该对象无效。但是如何根据上面的代码解决这个问题？

预期结果应该是显示新的标题，但始终显示为“ TypeError：data.map不是函数”。我尝试了此处建议的解决方案，但没有用。我对此很陌生。

Answer 1

由于您的数据是Object，因此您无法在其上使用map，因为Object没有map方法，因此您尝试映射{{ 1}}属性位于source数组内

更改此

articles

对此

data.map(entry => entry.source)

使用nextjs / react访问newsapi时出现“ TypeError：data.map不是函数”

1 个答案: