如何正确将字典数组映射到Select下拉选择器？

嘿，问题很明显啦——你在map的时候用了year.value和year.display，但你的dateArray里每个对象的属性明明是year和month啊！这些不存在的属性当然会让选项显示空内容啦😉

下面分几种场景给你解决方案：

场景1：直接渲染所有年份/月份（含重复项） #

如果只是想把数组里每一项的年份、月份分别放到两个下拉框，直接访问对象的year和month属性即可，同时注意设置合理的key值：

// 年份下拉框
<select className='form-control'>
  {this.state.dateArray.map((item, index) => (
    <option key={index} value={item.year}>{item.year}</option>
  ))}
</select>

// 月份下拉框
<select className='form-control'>
  {this.state.dateArray.map((item, index) => (
    <option key={index} value={item.month}>{item.month}</option>
  ))}
</select>

场景2：渲染去重后的年份/月份（更实用） #

上面的写法会出现重复选项（比如2018出现两次、02出现两次），所以更合理的做法是先提取唯一的年份和月份：

render() {
  // 提取唯一年份集合
  const uniqueYears = [...new Set(this.state.dateArray.map(item => item.year))];
  // 提取唯一月份集合
  const uniqueMonths = [...new Set(this.state.dateArray.map(item => item.month))];

  return (
    <div>
      <select className='form-control'>
        {uniqueYears.map(year => (
          <option key={year} value={year}>{year}</option>
        ))}
      </select>

      <select className='form-control'>
        {uniqueMonths.map(month => (
          <option key={month} value={month}>{month}</option>
        ))}
      </select>
    </div>
  )
}

场景3：联动下拉框（选年份后显示对应月份） #

如果想要更友好的交互——选完年份才显示对应月份，可以维护一个选中年份的状态，再动态过滤数组：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateArray: [ {year:'2016', month: "01"}, {year:'2017', month: "01"}, {year:'2018', month: "02"}, {year:'2018', month: "02"} ],
      selectedYear: ""
    };
  }

  handleYearChange = (e) => {
    this.setState({ selectedYear: e.target.value });
  }

  render() {
    const { dateArray, selectedYear } = this.state;
    const uniqueYears = [...new Set(dateArray.map(item => item.year))];
    // 根据选中年份过滤并去重月份
    const filteredMonths = selectedYear 
      ? [...new Set(dateArray.filter(item => item.year === selectedYear).map(item => item.month))]
      : [];

    return (
      <div>
        <select 
          className='form-control' 
          onChange={this.handleYearChange} 
          value={selectedYear}
        >
          <option value="">请选择年份</option>
          {uniqueYears.map(year => (
            <option key={year} value={year}>{year}</option>
          ))}
        </select>

        <select 
          className='form-control' 
          disabled={!selectedYear}
        >
          <option value="">请选择月份</option>
          {filteredMonths.map(month => (
            <option key={month} value={month}>{month}</option>
          ))}
        </select>
      </div>
    );
  }
}

这样就能完美解决你的问题啦～

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