reactjs - 带有选择选项的 map 功能

Question

我在使用 .map 时遇到了一点问题。我有这样的状态:

getInitialState() {
return {
  dropdown1: [
    { value: 1, show: '3' },
    { value: 2, show: '6' },
    { value: 3, show: '9' },
    { value: 4, show: '12' },
    { value: 5, show: '15' },
    { value: 6, show: '18' },
    { value: 7, show: '21' },
    { value: 8, show: '24' },
    { value: 9, show: '27' },
    { value: 10, show: '30' },
    { value: 11, show: '33' },
    { value: 12, show: '36' },
    { value: 13, show: '39' },
    { value: 14, show: '42' },
    { value: 15, show: '45' },
    { value: 16, show: '48' },
  ],
  dropdown2: [
    { value: 1, show: '12' },
    { value: 2, show: '24' },
    { value: 3, show: '36' },
    { value: 4, show: '48' },
    { value: 5, show: '60' },
    { value: 6, show: '72' },
    { value: 7, show: '84' },
    { value: 8, show: '96' },
    { value: 9, show: '108' },
    { value: 10, show: '120' },
    { value: 11, show: '132' },
    { value: 12, show: '144' },
    { value: 13, show: '156' },
    { value: 14, show: '168' },
    { value: 15, show: '180' },
    { value: 16, show: '192' },
  ],
  dropdown3: [
    { value: 1, show: '3' },
    { value: 2, show: '6' },
    { value: 3, show: '9' },
    { value: 4, show: '12' },
    { value: 5, show: '15' },
    { value: 6, show: '18' },
    { value: 7, show: '21' },
    { value: 8, show: '24' },
    { value: 9, show: '27' },
    { value: 10, show: '30' },
    { value: 11, show: '33' },
    { value: 12, show: '36' },
    { value: 13, show: '39' },
    { value: 14, show: '42' },
    { value: 15, show: '45' },
    { value: 16, show: 'ellam' },
  ],
  dropdown4: [
    { value: 1, show: '3' },
    { value: 2, show: '6' },
    { value: 3, show: '9' },
    { value: 4, show: '12' },
    { value: 5, show: '15' },
    { value: 6, show: '18' },
    { value: 7, show: '21' },
    { value: 8, show: '24' },
    { value: 9, show: '27' },
    { value: 10, show: '30' },
    { value: 11, show: '33' },
    { value: 12, show: '36' },
    { value: 13, show: '39' },
    { value: 14, show: '42' },
    { value: 15, show: '45' },
    { value: 16, show: '48' },
    { value: 17, show: '60' }
  ]
}};

在我使用之后

<Input type="select" name="ccmonth" id="ccmonth" dropdown1={this.state.dropdown1}>
{
  this.props.dropdown1.map(dropdown => { 
    return <option dropdown={dropdown} value={dropdown.value}>{dropdown.show}</option>;
  })
}
</Input>

但我得到 this.props.dropdown1 is undefined。怎么了，你能解释一下吗？我在 this 中观看并尝试过视频。

Answer 1

您使用 getInitialState()，因此您初始化组件的状态，而不是 props。尝试类似的东西

<Input type="select" name="ccmonth" id="ccmonth" dropdown1 ={this.state.dropdown1}>
    { this.state.dropdown1.map(dropdown => { 
        return <option dropdown={dropdown} value={dropdown.value}>
            {dropdown.show}</option>;
        })
    }
</Input>