如何獲取從 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;
  };