React Native DropDownPicker 未设置默认值(react-native-dropdown-picker)

问题描述 投票:0回答:1

我正在尝试使用react-native-dropdown-picker 将默认值设置为下拉组件。

当屏幕加载时,我从数据库中获取值并将该值分配给下拉组件的“值属性”,但是在下拉列表中未选择该值。

如果我在下拉列表中对值属性进行硬编码,它就可以工作,只是当我从数据库分配值时就不起作用了。我不知道我在这里做错了什么。

这就是我正在努力做的事情。

这是组件的定义。

    import DropDownPicker, {
      ItemType,
      ValueType,
    } from 'react-native-dropdown-picker';

const DropDown = ({
  name,
  style,
  onChangeValue,
  value = null,

  ...props
}: DropDownProps) => {
  const [newValue, setNewValue] = useState<ValueType | null>(value);

  return (
    <View style={[styles.container, style]}>
      {name && <MaterialIcons name={name} color={colors.gray} size={24} />}
      <DropDownPicker
        {...props}
        setValue={setNewValue}
        placeholderStyle={styles.label}
        labelStyle={styles.label}
        style={styles.dropdown}
        value={newValue}
        containerStyle={styles.dropdownContainer}
        listMode="SCROLLVIEW"
        onChangeValue={changedVal => {
          if (changedVal && onChangeValue) {
            // @ts-ignore:next-line
            onChangeValue(changedVal);
          }
        }}
      />
    </View>
  );
};

这是我如何使用该组件。

<DropDown
  open={open}
  value={selectedCategory}
  items={CATEGORIES}
  name="list"
  placeholder={t('Category')}
  onOpen={() => setOpen(true)}
  onClose={() => setOpen(false)}
  style={[styles.input, styles.dropdownIndex]}
  onChangeValue={handleChange('category')}
/>

<DropDown
  open={stateOpen}
  value={selectedState}
  items={STATES}
  name="location-pin"
  placeholder={t('State')}
  onOpen={() => setStateOpen(true)}
  onClose={() => setStateOpen(false)}
  style={styles.input}
  onChangeValue={handleChange('state')}
/>

在这里,我创建状态变量来存储来自数据库的值。

const [selectedState, setSelectedState] = useState('AL');
  const [selectedCategory, setSelectedCategory] = useState('animal-protection');

这里我将值分配给状态变量,此时下拉列表中的值应该发生变化,但它没有发生。

setInitialValues({
  ...initialValues,
  foundationName: foundation?.name || '',
  description: foundation?.description || '',
  phone: foundation?.phone || '',
  regionServed: foundation?.regionServed || '',
  headquarters: foundation?.headquarters || '',
  city: foundation?.address?.city || '',
  zipcode: foundation?.address?.zipcode?.toString(),
});

setSelectedCategory(foundation?.category[0]);
setSelectedState(foundation?.address?.state);

当我在控制台中记录状态变量时,值就在那里,但下拉列表中的值同样没有改变。

  useEffect(() => {
    console.log(selectedCategory);
    console.log(selectedState);
  }, [selectedCategory, selectedState]);
reactjs react-native dropdown
1个回答
0
投票

我被困在这部分了。无法给出默认值。你有什么线索吗

© www.soinside.com 2019 - 2024. All rights reserved.