React日期选择下拉框绑定异常：无法获取yearOptions状态

嘿，我看了你的代码，很快就发现了几个导致yearOptions无法正常显示的问题，咱们一个个来解决：

1. 变量拼写错误（最关键问题） #

你在render方法里解构的是yearOptions，但在<Form.Select>组件的options属性里却写成了yearsOptions（多了一个s）！这就导致组件找不到对应的数据，自然显示不出下拉选项。

2. 缺少Moment.js的导入 #

代码里用到了moment()方法，但没有导入这个库，运行时会抛出moment is not defined的错误。你需要先确保已经通过npm install moment安装了依赖，然后在文件顶部添加导入语句：

import moment from 'moment';

3. 可选优化：直接初始化state生成年份选项 #

其实你不需要等到componentDidMount再更新state，因为生成年份选项的逻辑不依赖DOM或异步操作，可以直接在state初始化时调用方法，这样组件挂载后就能直接拿到数据：

state = { yearOptions: this.getYearsOptions() }

修正后的完整代码 #

import React from 'react';
import moment from 'moment';
// 假设你使用的是Ant Design的Form组件，按需导入或确认已全局引入
import { Form } from 'antd';

class DatePicker extends React.Component {
  // 直接初始化state，无需等待componentDidMount
  state = { yearOptions: this.getYearsOptions() }

  getYearsOptions = () => {
    let years = [];
    // 调整年份生成逻辑，更直观地获取当前年份往前推10年的区间
    const currentYear = moment().year();
    for (let index = 10; index >= 0; index--) {
      const year = currentYear - index;
      years.push({ key: year, value: year.toString(), text: year });
    }
    return years;
  };

  render () {
    const { yearOptions } = this.state;
    return (
      <Form.Select 
        compact 
        selection 
        placeholder='Year' 
        options={yearOptions} 
        name="birthDateYear" 
      />
    );
  }
}

export default DatePicker;

额外说明 #

• 我调整了年份生成的逻辑：currentYear - index比moment().add(-10, 'year').year() + index更直观，结果都是获取当前年份到前10年的区间（比如当前2024，就生成2014到2024的年份）。
• 如果你使用的不是Ant Design的Form组件，只需确保options属性的格式和你所用组件的要求匹配即可（你写的{key, value, text}是AntD Select的标准格式）。

内容的提问来源于stack exchange，提问作者Krunal Parmar