Reactjs 如何循环div内容，而不是div本身

我希望遍历所有错误并在引导警报div中显示它们，而不是每个项目都显示在自己的警报div中

这显然是为每个错误输出一个div，这不是我想要的

      {Array.isArray(this.state.errors) &&
        this.state.errors.map((error, index) => (
          <div key={index} className="alert alert-danger">
            {error.name}
            {error.email}
            {error.password}
          </div>
        ))}

{Array.isArray（this.state.errors）&&
this.state.errors.map（（错误，索引）=>(
{error.name}
{error.email}
{错误.密码}
))}

如果我这样做了，那么当页面加载时，我有一个空的红色div

      <div className="alert alert-danger">
        {Array.isArray(this.state.errors) &&
          this.state.errors.map((error, index) => (
            <div key={index}>
              {error.name}
              {error.email}
              {error.password}
            </div>
          ))}
      </div>

{Array.isArray（this.state.errors）&&
this.state.errors.map（（错误，索引）=>(
{error.name}
{error.email}
{错误.密码}
))}

如果您想要一个div，则应将其保留在循环之外。然后将每个错误消息包装在您选择的

span

或元素中。大概是这样的：

<div key={index} className="alert alert-danger">
  {Array.isArray(this.state.errors) &&
    this.state.errors.map((error, index) => (
      <span key={index}>
        {error.name}
        {error.email}
        {error.password}
      </span>
  ))}
</div>

  {Array.isArray(this.state.errors) && (
    <div className="alert alert-danger">
      {this.state.errors.map((error, index) => (
        <div key={index}>
          {error.name}
          {error.email}
          {error.password}
        </div>
      ))}
    </div>
  )}

{Array.isArray（this.state.errors）&&
this.state.errors.map（（错误，索引）=>(
{error.name}
{error.email}
{错误.密码}
))}

只需在alert div中映射错误，并为每个错误添加一个内部元素。以下是一个例子：

<div className="alert alert-danger">
  {
     this.state.errors
        .map((error, index) =>(
          <p key={index} className="error">
              {error.name}
              {error.email}
              {error.password}           
          </p>
        ))
  }
</div>

{
这个。状态。错误
.map（（错误，索引）=>(

{error.name}
{error.email}
{错误.密码}

))
}

const errs=[
{
姓名：'姓名'，
电子邮件：“电子邮件”，
密码：“密码”
}, {
姓名：'姓名'，
电子邮件：“电子邮件”，
密码：“密码”
}, {
姓名：'姓名'，
电子邮件：“电子邮件”，
密码：“密码”
}
]
类错误扩展了React.Component{
状态={
错误：null
}
componentDidUpdate（lastProps）{
if（lastProps.errors&&！this.props.errors）{
this.setState（{errors:null}）
}
如果（！lastProps.errors&&this.props.errors）{
this.setState（{errors:errs}）
}
}
渲染（）{
const{errors}=this.state
如果（！Array.isArray（errors）| | errors.length==0）{
返回空
}
返回(
{
错误。映射（（错误，索引）=>(

{error.name}
{error.email}
{错误.密码}

))
}
)
}
}
常量应用=（）=>{
const[withErrors，setWithErrors]=React.useState（false）；
const-toggleErrors=（）=>setWithErrors（state=>！state）；
返回(
{withErrors？'Remove errors'：'Add errors'}
)
}
ReactDOM.render（（），document.getElementById（'root'）

如果
这个怎么样

          {Array.isArray(this.state.errors) && this.state.errors.length > 0 && (
            <div className='alert alert-danger'>
              {this.state.errors.map((error, index) => (
                <div key={index}>
                  {error.name}
                  {error.email}
                  {error.password}
                </div>
              ))}
            </div>
          )}

{Array.isArray（this.state.errors）&&this.state.errors.length>0&&(
{this.state.errors.map（（错误，索引）=>(
{error.name}
{error.email}
{错误.密码}
))}
)}
我在尝试使用您的代码时遇到“意外令牌”错误是的，我留下了一些额外的括号。但是代码片段应该是OK的，而且，如果我只是删除第一行中的索引，我会遇到与我在问题中提到的相同的问题，即当页面加载时，会显示一个空的红色div。只有在提交表单时出现验证错误时才会显示。@user10980228可能会发布更多的代码，听起来可能还有一些需要解决的额外错误。Aprillion的解决方案应该解决这个问题，div会立即显示@user10980228是的，这正是我需要的！如果数组可以为空而不是为零错误而未定义，则使用
this.state.errors.length
很好