JavaScript向对象添加属性后访问对应key返回undefined问题排查

你的问题本质是异步代码执行顺序问题：
formSchema.validate 是异步方法，其后挂载的catch回调属于异步微任务，会等待当前所有同步代码执行完毕后才会触发运行。你写在catch外的console.log是同步代码，执行时catch内部的对象赋值逻辑还没有运行，此时ErrName还是初始化的空对象，因此访问属性返回undefined。
你在控制台看到的打印对象展开后有值，是因为浏览器控制台输出的是对象的引用，当你手动点击展开对象时，浏览器才会读取对象当前的最新属性值，这时候catch的赋值逻辑已经执行完成，因此能看到新增的属性。

方案1：将所有使用ErrName的逻辑移入异步回调内部 #

let ErrName = {};

formSchema.validate(values, { abortEarly: false }).catch(function (err) {
  err.inner.forEach((e) => {
    ErrName[e.path] = e.message;
  });
  // 所有需要操作ErrName的逻辑都放在这里执行
  console.log(ErrName);
  console.log(ErrName.email);
  return ErrName;
});

方案2：用async/await语法改写，逻辑更易读 #

// 外层需要包裹async函数
async function handleFormValidate() {
  const ErrName = {};
  try {
    await formSchema.validate(values, { abortEarly: false });
  } catch (err) {
    err.inner.forEach((e) => {
      ErrName[e.path] = e.message;
    });
  }
  // await执行完成后才会运行后续代码，此时ErrName已完成赋值
  console.log(ErrName);
  console.log(ErrName.email);
  return ErrName;
}

// 调用验证方法
handleFormValidate();

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