我正在尝试使用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]);
我被困在这部分了。无法给出默认值。你有什么线索吗