如何在React中将Spring Boot API返回的错误消息格式化为列表？

你的代码存在两个核心问题：

• 循环内多次调用setAlert会覆盖之前的状态，最终仅显示最后一条错误
• 拼写错误：JavaScript中数组遍历方法是forEach（大写F），而非foreach

以下是修正后的代码，将所有错误整合为列表后一次性传递给alert：

const handleSubmit = (event) => {
  event.preventDefault();
  postWithoutAuth("/auth/signup", formValues)
    .then((response) => {
      setAlert("Signed up successfully", "success");
    })
    .catch((error) => {
      // 生成所有错误列表项
      const errorItems = error.response.data.errors.map((e) => (
        <li key={e.field}>{`${e.field}: ${e.message}`}</li>
      ));
      // 包裹为完整列表并设置alert
      setAlert(<ul>{errorItems}</ul>, "error");
    });
};

补充说明： #

1. 使用map而非forEach：map可以直接返回JSX元素数组，更适合生成列表结构
2. 添加key属性：每个<li>需要唯一key（这里用e.field作为标识），保证React渲染性能和稳定性
3. 若你的alert组件仅支持纯文本而非JSX，可改用字符串拼接：

const handleSubmit = (event) => {
  event.preventDefault();
  postWithoutAuth("/auth/signup", formValues)
    .then((response) => {
      setAlert("Signed up successfully", "success");
    })
    .catch((error) => {
      const errorMessages = error.response.data.errors
        .map((e) => `${e.field}: ${e.message}`)
        .join("\n");
      setAlert(errorMessages, "error");
    });
};

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