React数组映射未拆分：表单错误渲染异常问题求助

核心原因 #

你的JSX结构违反了HTML规范：<ul>标签的直接子元素只能是<li>，但你在<ul>内部直接放置了文本Error: ，浏览器会自动修正这种不规范的DOM结构，导致渲染结果不符合预期，出现错误内容被拼接的情况。

修复步骤 #

1. 调整结构，将文本移出<ul>或放入<li>中
   正确写法示例1：把错误提示文本放在<ul>外面

   <div>
     Error:
     <ul>
       {props.errors.map((err, idx) => <li key={idx}>{err}</li>)}
     </ul>
   </div>
   

   正确写法示例2：把提示文本作为一个单独的列表项

   <ul>
     <li><strong>Error:</strong></li>
     {props.errors.map((err, idx) => <li key={idx}>{err}</li>)}
   </ul>
   

2. 确认props.errors的类型
   在组件中添加日志验证：

   console.log(Array.isArray(props.errors), props.errors);
   

   确保它确实是包含两个字符串的数组。如果不是，检查父组件的状态更新逻辑，比如是否错误地将数组拼接成了字符串（比如用setErrors(errors + newErr)而非setErrors([...errors, newErr])）。

3. 关于Array.join(", ")的问题
   如果props.errors是标准数组，join(", ")一定会生成带空格分隔的字符串。如果仍未显示空格，检查是否有CSS样式（比如white-space: nowrap或压缩空格的规则）影响了显示，或者确认你的JSX结构是否正确放置了拼接后的字符串。

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