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（），所以你初始化你的组件的状态，而不是道具。尝试像

这样的东西

<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>

使用选择选项的map函数

1 个答案: