React Native中如何通过API为每个Picker组件显示选中项

核心修改思路 #

要实现选中Picker选项后同步显示选中值，核心是通过状态管理绑定选中状态，让Picker的选中值与展示内容保持同步。

具体代码调整步骤 #

1. 新增选中状态变量
   在组件内定义一个state来存储当前选中的选项值：

const [selectedItem, setSelectedItem] = useState('');

2. 绑定Picker的选中值属性
   将Picker的selectedValue与上述state绑定，确保Picker能根据状态显示选中项：

<Picker
  selectedValue={selectedItem}
  // 保留其他原有属性
>

3. 实现选中事件更新状态
   给Picker添加onValueChange回调，选中选项时同步更新state：

<Picker
  selectedValue={selectedItem}
  onValueChange={(itemValue) => setSelectedItem(itemValue)}
>

4. 展示选中的选项内容
   在Picker组件外添加文本元素，直接显示当前选中的值：

<Text>当前选中: {selectedItem}</Text>

API加载数据的适配处理 #

如果Picker选项是通过API异步加载的，需注意数据加载完成后再渲染Picker，避免空数据异常：

• 用useEffect发起API请求，把返回数据存入state
• 渲染时先判断数据是否存在，再生成Picker.Item：

{data.length > 0 ? (
  <Picker
    selectedValue={selectedItem}
    onValueChange={(itemValue) => setSelectedItem(itemValue)}
  >
    {data.map(item => (
      <Picker.Item key={item.id} label={item.name} value={item.id} />
    ))}
  </Picker>
) : (
  <Text>加载中...</Text>
)}

完成以上修改后，选中Picker内任意选项时，状态会自动更新，Picker将显示选中的选项，同时外部文本也能同步展示选中值，符合预期效果。

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