Javascript React引导：如何将数组传递给Form.Control中的选项

我正在使用Form.Control创建一个下拉列表，我想使列表成为动态的。我的代码如下所示：

render() {
 return (

 <Form.Control as="select" value={this.state.inputval} onChange={this.updateinputval}>
  <option value={myArray[0].value}> myArray[0].value </option>
  <option value={myArray[1].value}> myArray[1].value </option>
 </Form.Control>

 )
}

render（）{
返回(
myArray[0]。值
myArray[1]。值
)
}

显然，这只在

myArray

有两个元素时才起作用。我想找到一种方法来动态地将

myArray

传递到'Form.Control'的

选项中。我在这里找到了有关如何使用
Select
的答案，但它似乎不像我在这里看到的那样使用
Form.Control as=“Select”

谢谢
呈现动态元素列表的标准方法是映射数组：

render() {
 return (
 <Form.Control as="select" value={this.state.inputval} onChange={this.updateinputval}>
  {myArray.map(opt => (
    <option value={opt.value}>{opt.value}</option>
  ))}
 </Form.Control>
 )
}

render（）{
返回(
{myArray.map（opt=>(
{opt.value}
))}
)
}

React将要求您为映射元素提供唯一的
键
道具。理想情况下，这应该是一个随机id字符串，但您可以添加映射数组的索引
myArray.map（（opt，i）=>…
，作为开发时的备用项（这也是在您不提供时使用的默认值）。
这将帮助您解决此问题。我为您提供了一个示例：

const myArray = ["Moo Moo", "Burt", "Little Kitty", "Juan"]

  const options = myArray.map((item) => {
    return (
      <option key={item} value={item}>
        {item}
      </option>
    )
  })

return (
    <Container>
      <Row>
        <Col>
          <Form>
            <Form.Group controlId="exampleForm.SelectCustom">
              <Form.Label>Custom select</Form.Label>
              <Form.Control as="select" custom>
                {options}
              </Form.Control>
            </Form.Group>
          </Form>
        </Col>
      </Row>
    </Container>
  )

const myArray=[“Moo Moo”、“Burt”、“Little Kitty”、“Juan”]
const options=myArray.map（（项）=>{
返回(
{item}
)
})
返回(
自定义选择
{options}
)

如果它是
数组
类型，那么映射
{item.value}
将不起作用，因为数组中没有键/值对，只有值。
感谢您提供了完整的答案