React Native Picker选中名称时如何setState对应ID？

这个需求很好实现，只需要调整Picker的value绑定和状态存储逻辑就行，我给你一步步说清楚：

1. 调整State结构 #

首先新增一个专门存储选中教师ID的状态（比如selectedTeacherId），替换原来的teacher_name；如果需要同时保留选中名称的状态，也可以新增selectedTeacherName字段。示例State如下：

this.state = {
  allTeachers: [
    { "id": "qKUd5GoBwpolnxM4upjo", "name": "XYZ", "subject": "Science" },
    { "id": "qaUe5GoBwkrtnxM4kOip", "name": "Vidya", "subject": "Mathematics" }
  ],
  selectedTeacherId: '0' // 默认选中提示项的value
}

2. 修改Picker组件配置 #

核心是把Picker.Item的value从教师名称换成ID，这样选中时拿到的就是对应ID，同时保证显示的还是名称：

• 将selectedValue绑定到新的selectedTeacherId状态；
• 把Picker.Item的value改为item.id，label依然保留item.name；
• 修正你代码里的小错误：this.state.allteachers应该是this.state.allTeachers（注意大小写），不然数组映射会失效；
• 在onValueChange里更新selectedTeacherId状态，如果需要同时存名称，也可以在这里根据ID查找并更新。

修改后的完整Picker代码：

<View style={styles.dropdownInput}>
  <Picker 
    selectedValue={this.state.selectedTeacherId} 
    style={styles.pickerCss} 
    onValueChange={(itemValue, itemIndex) => {
      // itemValue现在是选中教师的ID，直接存入状态
      this.setState({ selectedTeacherId: itemValue });
      
      // 可选：如果需要同时存储选中的名称，可添加以下代码
      // const targetTeacher = this.state.allTeachers.find(t => t.id === itemValue);
      // this.setState({ selectedTeacherName: targetTeacher?.name || 'Select Teacher' });
    }} 
  >
    <Picker.Item label='Select Teacher' value='0' />
    {/* 使用可选链操作符?.避免数组为空时的报错 */}
    {this.state.allTeachers?.map((item, key) => ( 
      <Picker.Item key={key} label={item.name} value={item.id} /> 
    ))}
  </Picker> 
</View>

3. 后续获取选中名称的方法 #

如果之后需要展示或使用选中教师的名称，可以通过selectedTeacherId在allTeachers数组中查找：

const selectedTeacher = this.state.allTeachers.find(teacher => teacher.id === this.state.selectedTeacherId);
const selectedTeacherName = selectedTeacher?.name || 'Select Teacher';

这样调整后，下拉选择器显示的还是教师名称，但选中后存储到state里的是对应的ID，完全满足你的需求～

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