React Native Picker获取完整选中项数据及编辑页默认选中问题求助

我帮你梳理两个可行的解决思路，你可以根据自己的场景灵活选择：

方案一：通过ID匹配完整数据（推荐） #

这个方案既能保留编辑页默认选中的正常功能，又能轻松拿到完整的选中项数据，是比较稳妥的做法：

1. 保持Picker的Item value还是用item.id，确保编辑页默认选中逻辑不受影响
2. 在onValueChange触发时，通过选中的ID从数据源里筛选出对应的完整对象

修改后的代码示例 #

Picker部分（保持原有逻辑不变）

<Picker 
  mode="dropdown" 
  headerStyle={{ backgroundColor: "#16334c" }} 
  headerBackButtonTextStyle={{ color: "#fff" ,marginLeft:-20}} 
  headerTitleStyle={{ color:'#fff',alignSelf:'center',marginLeft:50,width:'100%'}} 
  textStyle={{color:'#fff',fontSize:12,paddingLeft:8}} 
  style={{height:35,color:'#fff',width:'110%'}} 
  selectedValue={this.state.value} 
  onValueChange={(itemvalue) => this.GetPickerSelectedItemValue(itemvalue)} 
>
  {this.props.dropDownType.map((item,i) => { 
    return <Item label={item.name} value={item.id} key={i} /> 
  })}
</Picker>

更新GetPickerSelectedItemValue函数

GetPickerSelectedItemValue(itemvalue){
  // 通过选中的ID找到对应的完整数据项
  const selectedFullItem = this.props.dropDownType.find(item => item.id === itemvalue);
  this.setState({
    value: itemvalue,
    selectedFullItem: selectedFullItem // 把完整数据存在state里，后续提交API直接用
  });
}

编辑页初始化处理

在组件的构造函数或componentDidMount里初始化state：

constructor(props) {
  super(props);
  // 初始化时就通过编辑页传的ID拿到对应完整数据
  const initialSelectedItem = props.dropDownType.find(item => item.id === props.value) || null;
  this.state = {
    value: props.value || '',
    selectedFullItem: initialSelectedItem
  };
}

之后你提交API的时候，直接用this.state.selectedFullItem就能拿到包含name、address等字段的完整数据了。

方案二：直接使用对象作为选中值 #

如果你更倾向于直接把整个对象作为Picker的选中值，需要解决默认选中匹配的问题：

问题根源：Picker判断选中项是用严格相等（===），编辑页传过来的是ID（字符串/数字），而你把Item的value设为对象后，state初始值是ID，两者类型不同，无法匹配，所以默认选中失效。

解决步骤及代码示例 #

1. 将Item的value改为item（整个对象）
2. 初始化state时，通过编辑页传过来的ID，从数据源里找到对应的对象，把它设为state的value

Picker部分

<Picker 
  mode="dropdown" 
  headerStyle={{ backgroundColor: "#16334c" }} 
  headerBackButtonTextStyle={{ color: "#fff" ,marginLeft:-20}} 
  headerTitleStyle={{ color:'#fff',alignSelf:'center',marginLeft:50,width:'100%'}} 
  textStyle={{color:'#fff',fontSize:12,paddingLeft:8}} 
  style={{height:35,color:'#fff',width:'110%'}} 
  selectedValue={this.state.selectedItem} // 现在state存的是完整对象
  onValueChange={(selectedItem) => this.GetPickerSelectedItemValue(selectedItem)} 
>
  {this.props.dropDownType.map((item,i) => { 
    return <Item label={item.name} value={item} key={i} /> 
  })}
</Picker>

更新GetPickerSelectedItemValue函数

GetPickerSelectedItemValue(selectedItem){
  this.setState({
    selectedItem: selectedItem // 直接存储完整对象
  });
}

编辑页初始化处理

constructor(props) {
  super(props);
  // 通过编辑页传的ID找到对应的对象，作为初始选中值
  const defaultSelectedItem = props.dropDownType.find(item => item.id === props.value) || null;
  this.state = {
    selectedItem: defaultSelectedItem
  };
}

这样Picker就能正确识别默认选中项，同时你也能直接拿到完整的选中对象用于API提交。

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