时间戳

首页 > 解决方案 > 列表错误显示在控制台中，但只有一个错误显示在 div

javascript - 列表错误显示在控制台中，但只有一个错误显示在 div

问题描述

我正在使用 express-validator 进行表单验证，并使用 axios 将数据发送到服务器。验证完成后，我会发回响应。我可以遍历错误并将它们全部显示在控制台中，一个在另一个之下，但是在我想向用户显示错误的错误 div 中，它只显示一个，而不是像在控制台中那样全部显示。

控制器：

  if (!errors.isEmpty()) {
    return res.status(422).json({error: errors.array()});
  }

向用户显示错误：

  const errorLoop = error.response.data.error;
  for (const errMsg of errorLoop) {
    console.log(errMsg.msg);
    const showError = document.querySelector('.error');
    showError.classList.add("notification");
    showError.innerHTML = errMsg.msg;
  }

标签： javascriptnode.jsaxiosexpress-validator

解决方案

您正在为每个错误设置 innerHTML。因此，您正在替换它，并且只会看到最后一个错误。

尝试这个：

let errorMessages = ""
for(const errMsg of errorLoop){
    errorMessages += errMsg.msg + "<br>"
}
const showError = document.querySelector('.error')
showError.classList.add("notification")
showError.innerHTML = errorMessages

（<br>出于视觉目的，将插入一个新行）

推荐阅读