React中如何将表单数组传入Promise请求体并访问数组属性

form.roles 是数组类型，form.roles.roleId、form.roles.name 这类写法访问的是数组对象自身的属性，而不是数组内部存储的角色对象的属性，自然无法拿到目标值。

根据业务场景的不同，可按以下两种方案实现：

场景1：单角色模式（roles数组仅存储1个选中的角色） #

如果业务逻辑中roles数组只会保存单个有效角色项，通过数组下标访问对应元素的属性即可，必须加空值兜底，避免数组为空时抛出JS错误。
修正后的请求体构造代码：

const requestPromise = () =>
  new Promise(async (resolve, reject) => {
    try {
      // 可选链+空对象兜底，数组为空时不会报错
      const activeRole = form.roles?.[0] ?? {}
      const body = {
        crf2e_first_name: form.firstName,
        crf2e_last_name: form.lastName,
        crf2e_role_id: activeRole.roleId,
        crf2e_role_name: activeRole.name
      }
      // 后续发送请求逻辑
    } catch (err) {
      reject(err)
    }
  })

对应调整角色添加逻辑，单角色模式下不要用数组追加写法，直接替换数组内容即可，避免数组内出现多个角色项导致取值错误：

const handleAddRole = () => {
  setForm({
    ...form,
    roles: [{ roleId: '1', name: 'Role1' }]
  })
}

场景2：多角色模式（roles数组存储多个选中的角色） #

如果业务支持多选角色，根据后端接口的参数要求选择对应传值方式：

• 接口支持直接接收数组字段：直接将form.roles作为请求体对应字段的值传入即可，application/json格式的请求天然支持数组类型参数

  const body = {
    crf2e_first_name: form.firstName,
    crf2e_last_name: form.lastName,
    crf2e_roles: form.roles // 直接传完整角色数组
  }
  

• 接口要求单独传角色ID、角色名称的拼接值：通过map遍历数组提取对应属性，再按接口要求拼接（常见为逗号分隔格式）

  const body = {
    crf2e_first_name: form.firstName,
    crf2e_last_name: form.lastName,
    crf2e_role_ids: form.roles.map(item => item.roleId).join(','), // 输出格式如 "1,2,3"
    crf2e_role_names: form.roles.map(item => item.name).join(',') // 输出格式如 "Role1,Role2"
  }
  

多角色模式下的角色添加逻辑建议增加重复判断，避免同一个角色被重复加入数组：

const handleAddRole = () => {
  const isRoleExist = form.roles.some(item => item.name === 'Role1')
  if (!isRoleExist) {
    setForm({
      ...form,
      roles: [...form.roles, { roleId: '1', name: 'Role1' }]
    })
  }
}

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