React Native Picker组件问题：状态值变更但视觉选中项未更新

嘿，我来帮你搞定这个Picker的问题！你遇到的核心问题是Picker组件的selectedValue和Picker.Item的value匹配逻辑出了问题，导致state更新后视觉上没跟上。

问题根源分析 #

你现在把selectedValue绑定成了一个包含value和index的对象this.state.localSelecionado，但React Native的Picker是通过**严格相等（===）**来匹配选中项的：它会把selectedValue和每个Picker.Item的value做对比，找到匹配的选项来高亮显示。

而你的代码里：

1. 第一个Picker.Item甚至没设置value属性；
2. 每次setState都会创建一个新的对象（{ value: itemValue, index: itemIndex }），即使内容一样，对象引用也不同，Picker根本认不出来这是同一个选中项。

修复方案（推荐） #

调整state结构，直接存储选中项的value（原始类型，比如字符串、数字或null），不要用对象：

1. 先修改初始化的state：

constructor(props) {
  super(props);
  this.state = { localSelecionado: null }; // 直接存value，初始值对应默认选项
}

2. 然后修改Picker组件的代码，给每个Picker.Item加上value属性，确保selectedValue和Picker.Item的value类型一致：

<Picker 
  style={{ alignItems: 'center' }} 
  itemStyle={{ alignItems: 'center' }} 
  selectedValue={this.state.localSelecionado} 
  onValueChange={(itemValue, itemIndex) => {
    this.setState({ localSelecionado: itemValue });
    // 如果需要保存选中的index，可以单独加一个state字段，比如：
    // this.setState({ 
    //   localSelecionado: itemValue,
    //   selectedIndex: itemIndex 
    // });
  }}
>
  <Picker.Item key={null} label="Selecione....." value={null} /> {/* 必须添加value，和初始state对应 */}
  {/* 其他选项示例，确保每个都有value */}
  {/* <Picker.Item label="本地1" value="local_1" /> */}
  {/* <Picker.Item label="本地2" value="local_2" /> */}
</Picker>

为什么这个方案有效？ #

原始类型（null、字符串、数字）的相等比较是基于值本身的，不管怎么更新，只要值相同，Picker就能正确匹配到对应的选项，自然就能同步视觉上的选中状态了。

如果你一定要保存index怎么办？ #

可以单独给index加一个state字段，不要把它和value打包成对象。比如：

this.state = { 
  selectedValue: null,
  selectedIndex: 0 
};

然后在onValueChange里同时更新两个字段：

onValueChange={(itemValue, itemIndex) => {
  this.setState({ 
    selectedValue: itemValue,
    selectedIndex: itemIndex 
  });
}}

这样既保留了index信息，又不影响Picker的选中匹配逻辑。

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