选择下拉列表选项导致React应用崩溃，报错values.appOwner.map不是函数

DevOps 小满

2026-10-3

问题原因

你出现报错的核心原因是下拉选项的数据源和选中值共用了同一个state字段appOwner：

初始状态下values.appOwner是后端返回的企业数组，所以首次渲染可以正常调用map渲染选项
当你选中下拉选项后，handleChange会根据select的name="appOwner"，把values.appOwner直接覆盖为选中的字符串值（也就是你设置的corp.corporationName），字符串没有map方法，所以二次渲染时直接报错。

修复方案

步骤1：调整state结构

将数据源和选中值拆分，在你的state初始化位置新增两个字段：

corpList：用来存储所有企业的列表数组，也就是原来存在appOwner里的数据源
selectedAppOwner：用来存储用户选中的企业值，提交表单时把这个字段传给后端即可

步骤2：修改select组件代码

把原来的select部分替换为以下代码：

<select
  title='Select Corporation'
  name='selectedAppOwner'
  className='form-select'
  value={values.selectedAppOwner}
  onChange={handleChange}
>
  <option value="">Select a Corporation</option>
  {values.corpList &&
    values.corpList.map(corp => (
      <option key={corp.corporationId} value={corp.corporationName}>
        {corp.corporationName}
      </option>
    ))}
</select>

如果后端需要接收企业ID而不是企业名，把option的value属性改为corp.corporationId即可。