React渲染字符串数组时map函数不生成内容问题求助

你的代码里map回调函数没有返回要渲染的JSX元素，导致map生成的数组全是undefined，所以对应的div为空。

两种修正方式： #

1. 显式添加return语句 #

把map里的代码改成：

{array.map((date, index) => {
  return <p key={index}>{date}</p>;
})}

2. 使用小括号实现隐式返回 #

去掉花括号，改用小括号包裹JSX，让箭头函数自动返回表达式结果：

{array.map((date, index) => (
  <p key={index}>{date}</p>
))}

补充说明 #

当箭头函数用{}包裹函数体时，必须手动写return才能返回值；如果用()包裹，会自动返回括号内的内容。你之前的代码只在函数体内写了<p>标签，但没有返回，所以map没有生成可渲染的元素数组。

另外，虽然用数组索引index作为key在当前场景能运行，但如果后续数组有元素增删、排序变化，可能引发渲染异常，建议使用数组元素的唯一标识（比如每个邮箱地址本身，因为邮箱是唯一的）作为key，优化渲染性能：

{array.map((email) => (
  <p key={email}>{email}</p>
))}

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