react-native-picker 不会在编辑表单上填充数据

Question

我正在使用 react-native-web ，对于 Native 端，我正在使用 import { Picker } from '@react-native-picker/picker'

I' m 使用可重用的表单模式进行创建和编辑。在网络上，数据填充得很好，但例如在 iOS 上，下拉菜单设置不正确。我创建了一个可重用的组件，它的子组件是react-native-picker/picker。例如，我在表单安装上设置状态，如下所示：

 const [languageAbility, setLanguageAbility] = useState<number>(
    childProfile?.languageAbility?.id || 0,
  )
  const [grade, setGrade] = useState<number>(childProfile?.grade?.id || 0)
 

在我的组件上，它们的设置如下：

 <AccessibleSelect
              selectedValue={grade}
              options={childMenusData?.menus?.schoolGrades.map((sg) => ({
                label: sg.title,
                value: sg?.id,
              }))}
              onValueChange={(val: number) => setGrade(val)}
              label={t('ChildForms.Grade')}
              testID="grade"
              inputStyle={styles.selectStyles}
              tooltipText={isMobile ? 'What is a grade?' : ''}
              tooltipContent={t('ChildForms.WhatIsAGradeContent')}
              tooltipPlacement={'bottom'}
            />
          </View>
          {!isMobile && (
            <View style={styles.inputContainerHalf}>
              <Tooltip
                text="What is a grade?"
                content={t('ChildForms.WhatIsAGradeContent')}
                placement={'right'}
              />
            </View>
          )}
        </View>
        <View
          style={{
            flexDirection: isMobile ? 'column' : 'row',
            width: '100%',
            margin: 0,
          }}
        >
          <View
            style={[
              styles.inputContainerHalf,
              { marginRight: isMobile ? 0 : 30 },
            ]}
          >
            <AccessibleSelect
              selectedValue={languageAbility}
              options={childMenusData?.menus?.languageAbilities.map((la) => ({
                label: la.title,
                value: la.id,
              }))}
              onValueChange={(val: number) => setLanguageAbility(val)}
              label={t('ChildForms.LanguageAbility')}
              testID="languageAbility"
              additionalContainerStyles={{ paddingTop: 0, paddingBottom: 0 }}
              inputStyle={styles.selectStyles}
            />
          </View>
        </View>

实际的 Picker 组件（AccessibleSelect）如下所示：

  return (
    <View style={[styles.container, additionalContainerStyles]}>
 
      <Picker
        ref={refToAttachToInput}
        style={[
          Platform.OS === 'ios'
            ? styles.pickerIOS
            : [
                styles.picker,
                { borderColor, borderStyle: 'solid', borderWidth: 1 },
              ],
          inputStyle,
        ]}
        selectedValue={selectedValue}
        onValueChange={onValueChange}
        defaultValue={defaultValue && defaultValue}
        itemStyle={styles.pickerText}
        mode={isAndroid && 'dropdown'}
      >
        {options.map((o) => (
          <Picker.Item label={o.label} key={o.value} value={o.value} />
        ))}
      </Picker>

      <View
        style={[
          styles.bottomContainer,
          { justifyContent: fieldError ? 'space-between' : 'flex-end' },
        ]}
      >
        {!!fieldError && (
          <Text accessibilityLiveRegion="assertive" style={styles.errorText}>
            {fieldError}
          </Text>
        )}
      </View>
    </View>
  )
}