ReactJS中使用数组渲染MenuItem时map函数触发表达式报错问题

1 语法报错的直接原因 #

你使用箭头函数时加了{}包裹逻辑，但没有显式return返回JSX元素，工具检测到你只声明了JSX表达式却没有赋值或者返回，就触发了该报错。

修复语法错误的两种写法 #

• 写法1：保留{}，添加return语句，同时补充React列表渲染必须的key属性

{app.map((item, index) => {
  return <MenuItem key={index} value={item}>{item}</MenuItem>
})}

• 写法2：去掉{}，使用箭头函数隐式返回

{app.map((item, index) => <MenuItem key={index} value={item}>{item}</MenuItem>)}

2 数据结构适配问题 #

从调试输出能看到app是二维数组，每个map遍历得到的item本身是数组，直接赋值给value或者作为文本渲染不符合预期。如果你需要把所有内层的字符串都渲染为MenuItem，可先将数组扁平化：

// flat()会把二维数组拍平为一维数组，filter可过滤掉内层的空字符串
{app.flat().filter(item => item).map((item, index) => (
  <MenuItem key={index} value={item}>{item}</MenuItem>
))}

如果需要保留数组的分组结构，可以使用嵌套遍历：

{app.map((group, groupIndex) => (
  <React.Fragment key={groupIndex}>
    {/* 可自行在分组处加MenuGroup等分组组件 */}
    {group.map((item, itemIndex) => (
      item && <MenuItem key={itemIndex} value={item}>{item}</MenuItem>
    ))}
  </React.Fragment>
))}

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