在动态生成元素数组的内层map中访问外层参数的问题

看起来你在尝试给Menu组件渲染嵌套的分组菜单，但卡在了内层循环访问外层变量的问题上。我来帮你理清楚问题所在，以及正确的写法。

首先，先看你之前两种写法的问题：

第一种写法的问题 #

你把外层map的回调和内层map放在了一个数组[..., ...]里，这是语法错误——外层map的回调函数应该直接返回要渲染的内容，而不是把两个操作并列在数组里。更关键的是，内层的region变量此时根本不在当前作用域里，它是外层map的参数，只有在外层map的回调函数内部才能访问到。

第二种写法的问题 #

你在React.Fragment里直接写了Object.keys(...)的代码，没有用{}包裹——JSX里只有放在{}里的内容才会被当作JS表达式执行，否则会被当成普通文本渲染，这就是为什么你依然报错的原因。

正确的写法 #

我们需要在外层map的回调函数内部，先渲染ListSubheader，再用{}包裹内层的map来渲染对应的MenuItem，这样就能正确访问到外层的region变量了。同时要注意空值处理，避免this.state.available或某个region对应的属性不存在时报错。

<Menu 
  id="menu-locations" 
  anchorEl={this.state.anchorElLocationsMenu} 
  anchorOrigin={{ vertical: 'top', horizontal: 'right' }} 
  keepMounted 
  transformOrigin={{ vertical: 'top', horizontal: 'right' }} 
  open={Boolean(this.state.anchorElLocationsMenu)} 
  onClose={handleClose}
>
  {/* 先处理available为空的情况，用|| {}避免报错 */}
  {Object.keys(this.state?.available || {}).map(region => (
    // 用Fragment包裹一组元素，key要加在Fragment上
    <React.Fragment key={region}>
      <ListSubheader>{region}</ListSubheader>
      {/* 内层循环必须放在{}里，同时处理region对应属性为空的情况 */}
      {Object.keys(this.state.available[region] || {}).map(logicalRegion => (
        <MenuItem key={logicalRegion} onClick={handleLogout}>
          {logicalRegion}
        </MenuItem>
      ))}
    </React.Fragment>
  ))}
</Menu>

另一种写法：直接返回数组 #

如果你不想用React.Fragment，也可以直接返回一个包含ListSubheader和所有MenuItem的数组，不过要注意数组里每个元素的key必须唯一：

<Menu 
  id="menu-locations" 
  anchorEl={this.state.anchorElLocationsMenu} 
  anchorOrigin={{ vertical: 'top', horizontal: 'right' }} 
  keepMounted 
  transformOrigin={{ vertical: 'top', horizontal: 'right' }} 
  open={Boolean(this.state.anchorElLocationsMenu)} 
  onClose={handleClose}
>
  {Object.keys(this.state?.available || {}).map(region => [
    <ListSubheader key={`region-${region}`}>{region}</ListSubheader>,
    // 用展开运算符把内层map的结果合并到数组里
    ...Object.keys(this.state.available[region] || {}).map(logicalRegion => (
      <MenuItem key={`logical-${region}-${logicalRegion}`} onClick={handleLogout}>
        {logicalRegion}
      </MenuItem>
    ))
  ])}
</Menu>

关键要点总结 #

1. 作用域问题：内层循环必须写在外层map的回调函数内部，这样才能访问到外层的region变量。
2. JSX表达式：所有需要执行的JS代码必须放在{}里，否则会被当成文本处理。
3. 唯一key：列表渲染的每个元素都需要唯一的key属性，避免React警告，也帮助React高效更新DOM。

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