React中使用.map遍历数组时无法读取参数y，提示y未定义

你遇到的y is not defined错误，根源是箭头函数语法错误和JSX返回结构问题：

• 你写的data.map(y => <Nav />, <Cards title={y.title}/>)不符合箭头函数返回规则，逗号运算符会让箭头函数仅返回最后一个表达式，解析器无法正确识别y是map回调的参数。
• React组件只能返回单个根元素，若要渲染多个元素，必须用容器（比如div）或React片段包裹。
• 额外提醒：如果<Nav/>是全局导航，别放在map循环里，否则会为每个数据项重复渲染导航栏，这通常不是预期效果。

场景1：每个数据项需同时渲染Nav和Cards（仅当业务需要时使用） #

import Nav from './Nav'
import Cards from './Cards'
import data from './data'
import React from 'react'

export default function App(){
    return (
        data.map((y, index) => (
            // 用React片段包裹多元素，map循环必须加唯一key
            <React.Fragment key={index}>
                <Nav />
                <Cards title={y.title} />
            </React.Fragment>
        ))
    )
}

场景2：Nav仅渲染一次，Cards循环渲染（更符合常规业务逻辑） #

import Nav from './Nav'
import Cards from './Cards'
import data from './data'

export default function App(){
    return (
        <div>
            <Nav />
            {data.map((y, index) => (
                <Cards key={index} title={y.title} />
            ))}
        </div>
    )
}

• 箭头函数返回多元素时，要用括号包裹JSX实现隐式返回，或用大括号配合显式return。
• map循环必须给每个子元素添加唯一key属性，避免React警告，优先使用数据中自带的唯一ID，index仅作临时方案。
• JSX中不能用逗号分隔多个元素，必须用容器或片段包裹。

内容的提问来源于stack exchange，提问作者Erblin Krasniqi