ReactJS报Expected property shorthand object-shorthand错误如何解决

报错原因 #

你遇到的Expected property shorthand object-shorthand是ESLint的规则校验提示，触发原因是你在定义对象时，出现了属性名和对应值的变量名完全一致的写法（你代码里的comCod: comCod），ESLint要求这类场景使用对象简写语法简化书写。

另外注意你当前的写法逻辑不符合你的需求：你定义的valoreComune本身是带有comCod属性的对象，用const entity = { valoreComune }简写后，最终entity的结构是{ valoreComune: { comCod: xxx } }，并不是你需要的{ comCod: xxx }结构。

解决方案 #

方案1：修正语法和结构（推荐） #

直接给entity的comCod属性赋值，同时符合ESLint简写规则：

const saveEntity = (event, errors, values) => {
  // ...其他逻辑
  const entity = {
    // 其他属性
    comCod: comCod ? { comCod } : personEntity.comCod ? { comCod: personEntity.comCod.comCod } : null
  }
  // ...后续请求逻辑
}

如果一定要保留valoreComune变量的定义，把赋值行的重复写法改成简写即可：

const valoreComune: any = comCod ? { comCod: { comCod } } : personEntity.comCod ? { comCod: { comCod: personEntity.comCod.comCod } } : { comCod: null };
// entity赋值时要提取comCod属性，不要直接用valoreComune简写
const entity = {
  // 其他属性
  comCod: valoreComune.comCod
}

方案2：临时禁用该行校验 #

如果不需要遵循该ESLint规则，可以在报错行末尾添加注释跳过校验，仅适用于特殊场景：

// eslint-disable-next-line object-shorthand
const valoreComune: any = comCod ? { comCod: { comCod: comCod } } : personEntity.comCod ? { comCod: { comCod: personEntity.comCod.comCod } } : { comCod: null };

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