如何获取从 state 填充的下拉选项？

Question

我似乎无法让 select 元素具有基于 state 中数组元素的选项。 我尝试了很多不同的方法，但这似乎是最细粒度的（几年后我才重新开始反应，并试图重新学习它）。

我有一个完整的有状态的下拉组件，如下所示：

import React, { Component } from "react";
import "./Dropdown.css";


class Dropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [],
      selectedOption: "",
    };
  };

  componentDidMount = () => {
    this.setState({
      options: this.props.options
    });
  };

  displayOptions = () => {
    this.state.options.map(item => {
      return <option value={item} id="1">{item}</option>
    });
  };

  render() {
    return(
      <select className="dropdown">
        { this.displayOptions() }
      </select>
    )
  };
};

export default Dropdown;

被拉入的道具被构造为字符串或数字的数组。 举个例子：

[2020,2019,2018,2017,2016,2015,2014,2013,2012,2011,2010,2009,2008,2007,2006,2005,2004,2003,2002,2001,2000,1999,1998,1997,1996,1995,1994,1993,1992]

查看我的 React 开发工具，state 正在正确填充数组。 根据我对 React 的理解，一旦 state 被填充，组件应该重新渲染，调用 displayOptions，映射到数组，并用选项元素填充 select 元素。

但是当我 go 到实际页面时，无论我等待多长时间或做什么，下拉菜单都不会打开以显示选项。 我想我不知道我是否只是有一个错字导致它无法正常工作，或者我是否缺少 React、数组原型或其他东西的更大规则。

任何帮助将不胜感激。 如果需要更多信息，请告诉我。 我觉得我已经提供了所有相关信息，但如果需要，我很乐意提供更多信息。

Answer 1

从 function 返回

 displayOptions = () => {
    return this.state.options.map(item => {
      return <option value={item} id="1">{item}</option>
    });
  };

Answer 2

您错过了displayOptions的回报。 当您调用 function this.displayOptions()时，不会返回任何内容。

因为 map function 中的 return 语句只返回 function 内部的值，而没有返回到外部。 所以，正确的解决方案是。

 displayOptions = () => {
    return this.state.options.map(item => {
      return <option value={item} id="1">{item}</option>
    });
  };

或者

 displayOptions = () => {
    let options = this.state.options.map(item => {
      return <option value={item} id="1">{item}</option>
    });
    return options;
  };