javascript - 为什么我使用数组映射方法创建的选项具有空值（React）？

Question

我使用了一个 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>
  )
};

标签： javascriptreactjsjsxoptionarray-map

Answer 1

显示值取自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, 和 display 的值不相同。

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>