React中map遍历为何仅显最后一个元素？如何实现换行展示？

1. 仅显示最后一个文件名的原因及修复 #

你在循环中多次调用setNames，但React的useState更新是异步批量处理的。每次循环执行时，names都引用的是初始的空数组状态，所以每次setNames([...names, String(file)])都是在空数组基础上添加当前文件，最终只有最后一次更新生效，导致names数组里只剩最后一个文件名。

修复方式：
直接将allFiles转换为字符串数组后一次性更新状态，不要循环调用setNames：

const [names, setNames] = useState([]);

// 用useEffect确保仅在allFiles变化时更新
useEffect(() => {
  const fileNames = allFiles.map(file => String(file));
  setNames(fileNames);
}, [allFiles]);

2. 文件名不换行的原因及修复 #

你的JSX存在语法问题：返回的内容没有包裹在根元素或React片段中，这可能导致渲染异常；另外React要求列表渲染的元素必须带有唯一key属性，否则可能引发渲染问题。虽然<p>默认是块级元素会自动换行，但如果全局CSS重置了<p>的样式，也会导致不换行。

修复方式：

• 给返回的JSX添加根容器或React片段；
• 给map返回的每个<p>添加唯一key；
• 若样式被覆盖，显式设置块级样式。

修正后的返回代码：

return (
  <div>
    {names.map((name, idx) => (
      <p key={idx}>{name}</p>
    ))}
  </div>
);

如果不想添加额外的<div>，可以用React片段：

return (
  <>
    {names.map((name, idx) => (
      <p key={idx}>{name}</p>
    ))}
  </>
);

若样式问题导致不换行，可强制设置块级显示：

<p key={idx} style={{ display: 'block', margin: '8px 0' }}>{name}</p>

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