为什么我使用数组映射方法创建的选项的值为空反应？

问题描述

我使用了for循环来创建数字1-12的月份数组。
然后，我尝试使用映射数组方法为每个数字创建12个选项。
但是这些选项的值为空。
这是示例代码：

export default ({ experience }) => {
  let monthOptions = [];
  for (let i = 1; i < 13; i++) {
    monthOptions.push(i);
  }
  return (
    
    <select name="month" id="month">
      {
        monthOptions.map((month) => {
          return <option value={month} />;
        })
      }
    </select>
  )
};

解决方法

显示值来自label属性或标记内容，并且与传递给事件处理程序的实际值不同。要在选项中显示值，请在呈现代码时将其包括在内：

<option value={month}>{month}</option>;

或使用label属性：

<option value={month} label={month} />

示例：

const Example = () => {
  const monthOptions = [];
  
  for (let i = 1; i < 13; i++) {
    monthOptions.push(i);
  }
  
  return (
    <select name="month" id="month">
      {
        monthOptions.map((month) => (
          <option key={month} value={month}>{month}</option>
        ))
      }
    </select>  
  )
};
  
ReactDOM.render(
  <Example />,root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

您可以使用Array.from()来缩短代码长度。

注意：在此示例中，您可以看到value和显示值不相同。

const Example = () => (
  <select name="month" id="month">
    {
      Array.from({ length: 12 },(_,month) => (
         <option value={month} key={month}>
            {month + 1}
          </option>
      ))
    }
  </select>  
);
  
ReactDOM.render(
  <Example />,root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>