React Native DropDownPicker组件无法设置从数据库获取的默认值问题求助

大家好，我最近在用react-native-dropdown-picker组件时遇到了一个头疼的问题，折腾了好久都没搞定，想请各位帮忙看看：

我在页面加载时从数据库获取对应值，把这个值赋值给Dropdown组件的value属性，但下拉框里并没有选中对应的选项；可如果我直接硬编码这个值到组件的value里，就能正常选中。我实在搞不懂哪里出问题了，以下是我的代码和操作流程：

自定义DropDown组件定义 #

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监听了状态变化，控制台能打印出从数据库获取到的正确值，但下拉框就是没反应：

useEffect(() => {
  console.log(selectedCategory);
  console.log(selectedState);
}, [selectedCategory, selectedState]);

有没有大佬遇到过类似的问题？或者能帮我看看代码里哪里逻辑错了吗？

备注：内容来源于stack exchange，提问作者Charlie