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

Posted 2023-02-22

【中文标题】在 next.js / react 中映射时无法访问值

【英文标题】：Can't access values when mapping over in next.js / react

【发布时间】：2019-05-12 23:46:13

【问题描述】：

您好，我有一些 json，无法访问其中的特定值。这是出错的代码：

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

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

</Layout>
);

我得到的错误是

Cannot read property 'title' of undefined

但是，如果我删除：

caseStudy.title 

对于上面的代码块，我可以在 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"
        
    ]
 

谢谢。

【参考方案1】：

你的语法有点错误：

<ul>
  props.caseStudies.map((caseStudy ) => (   // note the removed 
    <a>caseStudy.title</a>
  ))
</ul>

【讨论】：

原来如此。奇怪的是它在官方 Next 文档中的内容：- nextjs.org/learn/basics/fetching-data-for-pages/…

不是你不能使用那种语法，它只是取决于你映射的内容。例如，在该教程页面上，show 是存储在 shows 数组中的对象的名称。通过在花括号中使用show，您可以更轻松地访问数组的特定部分。这也让你在做什么更加明确。

@JossClassey 切中要害。对于许多接触过其他语言的开发人员来说，javascript 感觉有点奇怪。例如document.querySelectorAll('a.vip').map(....) 将不起作用，因为querySelectorAll() 不会返回一个数组而是一个NodeList。在这一点上，js 有像... 运算符这样的技术：[...document.querySelectorAll('a.vip')].map 可以工作，因为现在它是一个数组......Javascript。讨厌它，感受它，喜欢它：D