React JS 如何正确将JSON数组值渲染到表单文本框并避免代码重复

优化方案 #

原有代码的核心问题是嵌套三元判断重复了完全相同的表单结构，我们可以通过收敛判断逻辑、抽离公共组件两种方式优化，同时还能修复原有实现隐含的ID重复问题。

方案1：简化判断逻辑，消除重复代码

先用可选链对数组做判空兜底，合并两个空值分支，代码直接减少2/3的冗余：

{
  // 提前对Names做判空，默认赋值为空数组，覆盖null/undefined场景
  const names = this.state.testJson?.Names || [];
  names.length > 0 ? 
    names.map(response => (
      <div className="form-group col-md-3" key={response.nameId}>
        <label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
        <input 
          name="firstName" 
          // 空值兜底，就算otherName为null/undefined也显示空白
          value={response.otherName ?? ''} 
          type="text" 
          className="form-control" 
          id="firstName" 
        />
      </div>
    )) : (
      <div className="form-group col-md-3">
        <label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
        <input 
          name="firstName" 
          value='' 
          type="text" 
          className="form-control" 
          id="firstName" 
        />
      </div>
    )
}

如果项目环境不支持ES2020的可选链、空值合并运算符，可以换成兼容写法：

const names = (this.state.testJson && this.state.testJson.Names) || [];
value={response.otherName || ''}

方案2：抽离公共组件，后续维护成本更低

如果这个表单字段在多个地方用到，可以直接抽成独立组件，后续修改样式、文案只需要改一次：

// 抽离公共的姓名字段组件
const FirstNameField = ({ value = '', keyId }) => (
  <div className="form-group col-md-3" key={keyId}>
    <label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
    <input 
      name="firstName" 
      value={value} 
      type="text" 
      className="form-control" 
      id="firstName" 
    />
  </div>
)

// 业务代码中直接调用
{
  const names = this.state.testJson?.Names || [];
  names.length > 0 
    ? names.map(res => <FirstNameField keyId={res.nameId} value={res.otherName} />)
    : <FirstNameField keyId="empty" />
}

补充：修复ID重复问题

原有实现如果Names数组长度大于1，会生成多个ID为firstName的输入框，不符合HTML ID唯一的规范。如果你的业务实际只需要展示第一条姓名数据，可以进一步简化，完全消除分支判断：

{
  const names = this.state.testJson?.Names || [];
  const nameItem = names[0] || {};
  return (
    <div className="form-group col-md-3">
      <label htmlFor="firstName">{Liferay.Language.get('first-name')}</label>
      <input 
        name="firstName" 
        value={nameItem.otherName ?? ''} 
        type="text" 
        className="form-control" 
        id="firstName" 
      />
    </div>
  )
}

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