javascript - 使用 for 循环 react 构建选择输入

Question

我正在尝试构建一个选择下拉列表并使用 for 循环填充输入字段。

import React, { Component } from 'react';

export default class Test extends Component {
  render() {
    let options = [];
    for (let i=2; i < 20.5; i += 0.5){
      options.push(<option value={i*60} key={i}>{i} hours</option>)
    }
    return (
      <select>
        {options}
      </select>
    )
  }
}

{i} 小时 部分导致 Uncaught TypeError: Cannot read property 'props' of undefined 错误消息。将其更改为固定字符串可防止错误。

我确信我遗漏了一些基本的东西，但我不知道为什么这不起作用。

Answer 1

试试这个:

import React, { Component } from 'react';

export default class Test extends Component {
  render() {
    const options = [];
    for (let i=2; i < 20.5; i += 0.5) options.push(i);
    return (
      <select>
        {options.map(option => (
          <option key={option} value={option*60}>
            {option} hours
          </option>
        ))}
      </select>
    )
  }
}

或(2021 年)作为功能组件:

export default const Test = () => {
  const options = [];
  for (let i=2;i<20.5;i+=0.5) options.push(i);
  return (
    <select>
      {options.map(option => (
        <option key={option} value={option*60}>
          {option} hours
        </option>
      ))}
    </select>
  )
}