列表错误显示在控制台中，但 div 中仅显示一个错误

Question

我正在使用 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;
  }

Answer 1

您正在为每个错误设置 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> 将插入一个新行）

列表错误显示在控制台中，但 div 中仅显示一个错误

list errors shows in console but only one error shows in div

javascript

node.js

axios

express-validator