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

Question

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

Controller :

  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> 将插入一个新行用于视觉目的)