在 next.js/react 中映射时无法访问值

use*_*781 1 javascript arrays json reactjs next.js

嗨,我有一些 json,我无法访问其中的特定值。这是出错的代码:

 const Index = props => (
 <Layout>
 <h1>Case Studies</h1>

 <ul>
   {props.caseStudies.map(({ caseStudy }) => (
     <a>{caseStudy.title}</a>
   ))}
 </ul>

</Layout>
);
Run Code Online (Sandbox Code Playgroud)

我得到的错误是

Cannot read property 'title' of undefined
Run Code Online (Sandbox Code Playgroud)

但是,如果我删除:

{caseStudy.title} 
Run Code Online (Sandbox Code Playgroud)

对于上面的代码块,我可以在 Chrome 的 React Inspector 工具中看到“caseStudies”是 Index 的一个道具。而“title”是 caseStudies 道具中的一个键。我似乎无法访问它!

这是有问题的json:

{
"status": "ok",
"sets": {
    "caseStudies": [
        {
        "_id": "1",
        "title": "Case Study Item One",
        "_title": "Case Study Item One",
        "date": "2018-06-01"
        }
    ]
 }
}
Run Code Online (Sandbox Code Playgroud)

谢谢。

mes*_*ill 5

你的语法有点错误:

<ul>
  {props.caseStudies.map((caseStudy ) => (   // note the removed {}
    <a>{caseStudy.title}</a>
  ))}
</ul>
Run Code Online (Sandbox Code Playgroud)

  • @JossClassey 切中要点。对于许多接触过其他语言的开发人员来说,Javascript 感觉有点奇怪。例如,“document.querySelectorAll('a.vip').map(....)”将不起作用,因为“querySelectorAll()”不会返回数组,而是返回“NodeList”。此时,js 具有诸如 `...` 运算符之类的技术:`[...document.querySelectorAll('a.vip')].map` 可以工作,因为现在它是一个数组......Javascript。讨厌它,感受它,喜欢它:D (2认同)