React Native自定义Picker选中项不显示及提交异常问题咨询

问题说明 #

自定义模态Picker选中选项后，出现两种异常情况：

• 设置onSelectItem={(item) => setMonth(item.value)}时，选中项无法显示；
• 设置onSelectItem={(item) => setMonth(item)}时，选中项能显示，但提交数据时无法获取正确的数值。

原代码参考 #

自定义ItemPicker组件 #

function ItemPicker({
  icon,
  items,
  onSelectItem,
  placeholder,
  selectedItem,
  label,
}) {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <>
      <TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
        <View style={styles.container}>
          {icon && (
            <MaterialCommunityIcons
              name={icon}
              size={20}
              color={colors.medium}
              style={styles.icon}
            />
          )}
          <Text style={styles.text}>
            {selectedItem ? selectedItem.label : placeholder}
          </Text>
          <MaterialCommunityIcons
            name="chevron-down"
            size={20}
            color={colors.gray}
          />
        </View>
      </TouchableWithoutFeedback>

      <Modal visible={modalVisible} animationType="fade">
        <View>
          <Button title="Close" onPress={() => setModalVisible(false)} />
          <FlatList
            data={items}
            keyExtractor={(item) => item.value.toString()}
            persistentScrollbar
            renderItem={({ item }) => (
              <TouchableOpacity
                label={item.label}
                onPress={() => {
                  setModalVisible(false);
                  // onSelectItem(item); // 注意：这里被注释掉了，会导致回调不执行
                }}
              >
                <Text style={styles.pickertext}>{item.label}</Text>
              </TouchableOpacity>
            )}
          />
        </View>
      </Modal>
    </>
  );
}

调用代码 #

const months = [
  { label: "January", value: 1 },
  { label: "Feburary", value: 2 },
  { label: "March", value: 3 },
  { label: "April", value: 4 },
  { label: "May", value: 5 },
  { label: "June", value: 6 },
  { label: "July", value: 7 },
  { label: "August", value: 8 },
  { label: "September", value: 9 },
  { label: "October", value: 10 },
  { label: "November", value: 11 },
  { label: "December", value: 12 },
];     

<ItemPicker
  selectedItem={month}
  value={month}
  months={months}
  onSelectItem={(item) => setMonth(item.value)}
  items={months}
  icon="calendar-month"
  placeholder="Choose Month"
/>

核心问题分析 #

1. 显示逻辑依赖对象属性：Picker的显示文本取自selectedItem.label，如果selectedItem是数值（比如setMonth(item.value)后month变成数字），则无法读取label属性，导致不显示。
2. 回调未执行：原Picker代码中onSelectItem(item)被注释，即使选择了选项，也不会触发父组件的状态更新，这是关键隐性问题。

修复方案 #

方案一：存储完整选项对象，提交时提取数值 #

适合不需要强制存储数值的场景，无需修改Picker组件：

1. 取消Picker中onSelectItem(item)的注释，确保回调能触发；
2. 调用Picker时，修改onSelectItem为存储完整对象：

<ItemPicker
  selectedItem={month}
  items={months}
  onSelectItem={(item) => setMonth(item)} // 存储完整选项对象
  icon="calendar-month"
  placeholder="Choose Month"
/>

3. 提交数据时，提取对象中的value：

// 提交示例
const submitForm = () => {
  const data = {
    selectedMonth: month?.value, // 从对象中获取数值
    // 其他表单字段...
  };
  // 执行提交逻辑
};

方案二：存储数值，Picker内匹配对应选项 #

适合必须存储数值的场景，需修改Picker组件：

1. 修改Picker组件，新增selectedValue props，根据数值匹配选项对象：

function ItemPicker({
  icon,
  items,
  onSelectItem,
  placeholder,
  selectedValue, // 新增：接收选中的数值
  label,
}) {
  const [modalVisible, setModalVisible] = useState(false);
  // 根据数值找到对应的选项对象
  const selectedItem = items.find(item => item.value === selectedValue);

  return (
    <>
      <TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
        <View style={styles.container}>
          {icon && (
            <MaterialCommunityIcons
              name={icon}
              size={20}
              color={colors.medium}
              style={styles.icon}
            />
          )}
          <Text style={styles.text}>
            {selectedItem ? selectedItem.label : placeholder}
          </Text>
          <MaterialCommunityIcons
            name="chevron-down"
            size={20}
            color={colors.gray}
          />
        </View>
      </TouchableWithoutFeedback>

      <Modal visible={modalVisible} animationType="fade">
        <View>
          <Button title="Close" onPress={() => setModalVisible(false)} />
          <FlatList
            data={items}
            keyExtractor={(item) => item.value.toString()}
            persistentScrollbar
            renderItem={({ item }) => (
              <TouchableOpacity
                onPress={() => {
                  setModalVisible(false);
                  onSelectItem(item); // 必须取消注释
                }}
              >
                <Text style={styles.pickertext}>{item.label}</Text>
              </TouchableOpacity>
            )}
          />
        </View>
      </Modal>
    </>
  );
}

2. 调用Picker时，传入selectedValue并保持存储数值：

<ItemPicker
  selectedValue={month} // 传入数值
  items={months}
  onSelectItem={(item) => setMonth(item.value)} // 存储数值
  icon="calendar-month"
  placeholder="Choose Month"
/>

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