React Native Picker在iOS选中后跳回顶部问题排查

这是典型的引用类型比较导致的Picker选中状态异常，不是react-native-picker的库bug，iOS和Android端Picker的实现逻辑差异暴露了这个问题。

原因 #

iOS端的react-native-picker判断选中项时，会对selectedValue和Picker.Item的value做严格引用比较（===）。你直接把整个course对象作为value传入，虽然getUserScores里更新的currentCourse内容和原数组中的对象一致，但如果两者的内存引用地址不同（比如JSON解析后生成的新对象、异步处理中重新构造的对象），Picker就无法匹配到对应的选中项，最终默认跳回列表第一项。而Android端的Picker实现是基于内容比较，所以没有这个问题。

解决方案 #

最稳妥的方式是用基本类型作为Picker的value（比如id、唯一名称），避免引用类型的比较问题，具体修改如下：

1. 修改Picker组件代码

将Picker.Item的value改为course的唯一标识（比如course.id，如果没有id可以用唯一的course.name）：

<Picker
  style={styles.picker}
  selectedValue={state.currentCourse.id} // 用唯一标识作为选中值
  onValueChange={(itemValue) => getUserScores(itemValue)}
>
  {state.courses.map((course) => (
    <Picker.Item key={course.name} label={course.name} value={course.id} />
  ))}
</Picker>

2. 修改getUserScores函数

根据选中的唯一标识，从原数组中匹配对应的course对象再更新状态：

const getUserScores = async (courseId) => {
  // 从原数组中找到匹配的course对象
  const selectedCourse = state.courses.find(course => course.id === courseId);
  
  // ... 你的原有逻辑：获取userScores
  
  setState({
    currentCourse: selectedCourse,
    userScores: userScores,
  });
};

备选方案（坚持用对象作为value） #

如果一定要用整个对象作为value，需要确保更新状态时的currentCourse是原数组中的同一个引用对象，修改onValueChange的逻辑：

<Picker
  style={styles.picker}
  selectedValue={state.currentCourse}
  onValueChange={(itemValue) => {
    // 从原数组中匹配到引用一致的对象
    const matchedCourse = state.courses.find(c => c.name === itemValue.name);
    getUserScores(matchedCourse);
  }}
>
  {state.courses.map((course) => (
    <Picker.Item key={course.name} label={course.name} value={course} />
  ))}
</Picker>

这样setState中的currentCourse和原数组中的对象引用一致，iOS端Picker就能正确识别选中状态了。

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