react-native-element-dropdown默认值不生效，如何设置当前年月为默认值？

问题核心在于默认值的类型与下拉选项的value类型不匹配，同时月份初始值的逻辑错误，具体修复步骤如下：

1. 修正年份初始值的类型 #

GetYear()返回的选项中value是字符串类型（比如"2024"），但你代码里yearvalue的初始值是数字类型（比如2024），类型不匹配导致Dropdown无法识别默认选项。

修改组件中的年份状态初始化：

const [yearvalue, setYearAttendance] = useState( (new Date()).getFullYear().toString());

2. 修正月份的初始值逻辑与类型 #

GetMonth()返回的选项中value是月份索引的字符串（0对应January，1对应February……11对应December），但你之前的代码把getMonth()+1作为初始值，既和选项的value值不匹配，类型也不对。

修改组件中的月份状态初始化：

const [monthvalue, setMonthAttendance] = useState( (new Date()).getMonth().toString());

3. 可选：拆分Dropdown的焦点状态（优化体验） #

当前两个Dropdown共用同一个isFocus状态，会导致点击任意一个下拉框时两个框都触发边框变色，建议拆分状态：

const [yearFocus, setYearFocus] = useState(false);
const [monthFocus, setMonthFocus] = useState(false);

然后分别对应两个Dropdown的onFocus和onBlur：

// 年份Dropdown
onFocus={() => setYearFocus(true)}
onBlur={() => setYearFocus(false)}
style={[Styles.dropdown, yearFocus && { borderColor: 'blue' }]}

// 月份Dropdown
onFocus={() => setMonthFocus(true)}
onBlur={() => setMonthFocus(false)}
style={[Styles.dropdown, monthFocus && { borderColor: 'blue' }]}

完整修复后的组件核心代码 #

function Attendence({navigation}) {
    // 修正后的状态初始化
    const [yearvalue, setYearAttendance] = useState( (new Date()).getFullYear().toString());
    const [monthvalue, setMonthAttendance] = useState( (new Date()).getMonth().toString());
    // 拆分焦点状态
    const [yearFocus, setYearFocus] = useState(false);
    const [monthFocus, setMonthFocus] = useState(false);

    const rederSearchBar=()=>{
        return(
          <Card>
          <Card.Actions>
            <Dropdown
              style={[Styles.dropdown, yearFocus && { borderColor: 'blue' }]}
              placeholderStyle={Styles.placeholderStyle}
              selectedTextStyle={Styles.selectedTextStyle}
              inputSearchStyle={Styles.inputSearchStyle}
              data={GetYear()}
              maxHeight={400}
              labelField="label"
              valueField="value"
              placeholder='Year'
              value={yearvalue}
              onFocus={() => setYearFocus(true)}
              onBlur={() => setYearFocus(false)}
              onChange={item => {
                setYearAttendance(item.value);
                setYearFocus(false);
              }}
            />
            <Dropdown
              style={[Styles.dropdown, monthFocus && { borderColor: 'blue' }]}
              placeholderStyle={Styles.placeholderStyle}
              selectedTextStyle={Styles.selectedTextStyle}
              inputSearchStyle={Styles.inputSearchStyle}
              data={GetMonth()}
              maxHeight={400}
              labelField="label"
              valueField="value"
              placeholder='Month'
              value={monthvalue}
              onFocus={() => setMonthFocus(true)}
              onBlur={() => setMonthFocus(false)}
              onChange={item => {
                setMonthAttendance(item.value);
                setMonthFocus(false);
              }}  
          />
           <Button mode="contained" buttonColor="#3377FF" textColor="#fff" onPress={() => loadAttendance()}><Icon size={20} name="search-circle" /> </Button>
          </Card.Actions>
        </Card> 
        );
    
       }
    // 其余代码保持不变
}

修改后，下拉框即可正确显示当前年份和月份作为默认值。

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