React-Bootstrap FormControl下拉选框值已存但未显示，需获取选中项ID

我帮你梳理下问题所在，然后给出修复方案：

问题分析 #

你的代码里有几个关键问题导致下拉选框显示异常：

• 条件判断错误：if(value = nameArray[i].id)这里用了赋值运算符=，而不是比较运算符===，这会导致每次循环都把id赋值给value，逻辑完全出错。
• 直接修改state：React不允许直接修改this.state对象，你应该创建新对象来更新state，否则React可能不会触发组件重新渲染。
• 下拉框value绑定错误：你把value绑定到了this.state.object.name，但option的value是list.id，两者类型和值都不匹配，导致选框无法正确匹配选中项。

修复后的代码 #

import { Form } from 'react-bootstrap'
import { Component } from 'react'; // 别忘了导入Component！

const nameArray = [
  { "id": 52655, "firstName": "raj", "lastName": "", "primaryAddress": "sad" },
  { "id": 52656, "firstName": "SubbaRaju", "lastName": "ch", "primaryAddress": "kphb" },
  { "id": 52667, "firstName": "Ravi", "lastName": "Varma", "primaryAddress": "Hyderabad" }
]

export default class File extends Component {
  constructor(props) {
    super(props);
    // 初始state直接保存选中的id，逻辑更清晰
    this.state = { selectedId: -1 }
  }

  nameChange = (value) => {
    const selectedId = Number(value); // 把select返回的字符串value转为数字，和id类型匹配
    this.setState({ selectedId });
    
    // 如果需要获取选中的完整对象，直接用find方法查找
    const selectedItem = nameArray.find(item => item.id === selectedId);
    console.log("选中的记录：", selectedItem);
  }

  render() {
    // 根据选中的id快速找到对应的名称
    const selectedName = nameArray.find(item => item.id === this.state.selectedId)?.firstName || "";

    return (
      <div>
        <Form>
          <Form.Group>
            <Form.Label className="Font">Name</Form.Label>
            <Form.Control 
              // value绑定选中的id，和option的value完全对应
              value={this.state.selectedId} 
              onChange={(e) => this.nameChange(e.target.value)} 
              className="Inputstyle" 
              as="select" 
            >
              <option disabled value={-1} key={-1}>select</option>
              {nameArray.map(list => (
                <option key={list.id} value={list.id}>{list.firstName}</option>
              ))}
            </Form.Control>
            {/* 可选：如果需要单独展示选中的名称，可以加这个 */}
            {/* <p>当前选中：{selectedName}</p> */}
          </Form.Group>
        </Form>
      </div>
    )
  }
}

关键修改点说明 #

1. 简化state结构：直接保存选中的selectedId，避免不必要的复杂对象，逻辑更直观。
2. 修正state更新方式：用setState直接更新选中id，同时用find方法替代循环查找，代码更简洁高效。
3. 匹配下拉框value绑定：Form.Control的value和option的value={list.id}保持一致，这样选框会自动匹配并显示对应的firstName。
4. 类型转换处理：因为select组件返回的e.target.value是字符串类型，所以转成数字后再和id（数字类型）做比较，避免类型不匹配的问题。

这样修改后，下拉选框会正常显示选中的firstName，同时你能在nameChange函数里拿到选中项的id，方便后续定位具体记录。

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