React Bootstrap typeahead不能正确显示选项

问题描述

我正在尝试使用React Bootstrap Typeahead，但是在加载页面时，这些选项未显示在Typeahead组件中。

我的页面代码如下：

const React = require('react');
const Jumbotron = require('react-bootstrap').Jumbotron;
const Container = require('react-bootstrap').Container;
const Form = require('react-bootstrap').Form;
const FormGroup = require('react-bootstrap').FormGroup;
const Button = require('react-bootstrap').Button;
const Typeahead = require('react-bootstrap-typeahead').TypeaheadInputSingle
const AuthorisedLayout = require('./Layouts/authorised');

class Generate extends React.Component {
  render() {
    const options = Object.keys(this.props.musicServices).map((id) => {
      return {id: id,label: this.props.musicServices[id].name }
    });
    console.log(options);
    return (
      <AuthorisedLayout title={this.props.title}>
        <Jumbotron>
          <Container>
            <h1 className="display-3">{this.props.title}</h1>
            <p>HI,this will generate a new key pair to be stored on the server.</p>
            <p>When the generation is complete,a zip file containing the key pair will download to your machine.</p>
          </Container>
        </Jumbotron>
        <Container>
          <Form method='POST'>
            <FormGroup controlId="service">
              <Form.Label>Music Service</Form.Label>
              <Typeahead
                id="service"
                options={options}
                placeholder="Choose a Music Service..."
              />
            </FormGroup>
            <Button variant="primary" type="submit">
              Generate key pair
            </Button>
          </Form>
        </Container>
      </AuthorisedLayout>
    );
  }
}

module.exports = Generate;

，选项显示为：

[
  { id: '12314645',label: 'amazon' },{ id: '12354635',label: 'itunes' },{ id: '12354645',label: 'bleep' }
]

我的标头包含：https://unpkg.com/react-bootstrap-typeahead@5.1.1/css/Typeahead.css，并且似乎已正确加载。当我使用：const Typeahead = require('react-bootstrap-typeahead').TypeaheadInputSingle而不是const Typeahead = require('react-bootstrap-typeahead')或const Typeahead = require('react-bootstrap-typeahead').Typeahead时，会显示下拉框和背景，但其中不包含任何数据...在检查元素时，显示为：

<input id="service" options="[object Object],[object Object],[object Object]" placeholder="Choose a Music Service..." class="rbt-input-main form-control rbt-input">表示这是在阅读选项，但不能正确解释它们。

解决方法

您需要使用Typeahead组件，而不是TypeaheadInputSingle：

const Typeahead = require('react-bootstrap-typeahead').Typeahead;

TypeaheadInputSingle是一个子组件，不能单独使用。