ReactJS中如何遍历数组内对象以获取并展示注册表单报错信息

常见取值失败原因 #

• 异步返回时机问题：errors是后端接口返回的异步数据，首次渲染时errors还未被赋值，初始值如果仅声明为空对象{}，此时errors.username为undefined，直接访问[0]会抛出类型错误。
• 字段不存在：校验未触发时，errors对象下不会存在对应表单字段的key，直接访问也会导致报错。

安全取值方案 #

单字段取值 #

推荐使用可选链操作符做兜底兼容，避免中间层级不存在时报错：

// 兼容写法，不存在时返回undefined不会报错
console.log(errors?.username?.[0]?.message);

如果运行环境不支持可选链，可使用逐层逻辑与判断：

console.log(errors && errors.username && errors.username[0] && errors.username[0].message);

在React组件中渲染单个字段报错的示例：

<div className="form-item">
  <label>用户名</label>
  <input name="username" onChange={handleInputChange} />
  {/* 仅当存在报错时渲染提示 */}
  {errors?.username?.length > 0 && (
    <span className="error-tip">{errors.username[0].message}</span>
  )}
</div>

遍历所有报错信息 #

如果需要一次性展示全部表单的报错，可通过Object.entries遍历errors对象的所有键值对：

const renderAllErrors = (errors = {}) => {
  return Object.entries(errors).map(([field, errorList]) => {
    // 单个字段可能存在多条报错，遍历错误列表
    return errorList.map((error, idx) => (
      <p key={`${field}-${idx}`} className="error-item">
        {field}: {error.message}
      </p>
    ))
  })
}

// 组件中调用
<div className="error-container">{renderAllErrors(errors)}</div>

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