如何根据下拉菜单中的选择渲染组件？

Question

我无法引用在功能 displayWarehouse（）中创建的下拉选项，因为它是从数据库生成的。目的是在一个下拉列表中显示仓库列表，然后根据仓库选择显示另一个组件，但我不断收到错误消息

  

无法读取未定义的属性

由于某种原因，我无法访问下拉菜单中的各个选项。

constructor(props) {
    super(props);
    this.state = { option: 'Parchment House' };

    this.handlePick = this.handlePick.bind(this);
    // this.handleSubmit = this.handleSubmit.bind(this);
    this.componentDidMount = this.componentDidMount.bind(this)

}
displayWarehouse() {
    return (
        <select id="opt" onChange={this.handlePick} value={this.state.option}>
            {this.props.data.Warehouse.map((warehousename) => {
                return <option key={warehousename.warehouseID}>{warehousename.name}</option>;
            })}
        </select>
    );
}

displayBooks(num) {
    // console.log(document.getElementsByClassName('use').item(0).name)
    return this.props.data.Warehouse[num].books.map((titles) => {
        return (
            <div key={titles.bookID}>
                <li>
                    {titles.title} {titles.stock.balance}
                </li>
            </div>
        );
    });
}

handlePick(e) {
    console.log(this.state.option);
    this.setState({ option: e.target.value });
    // console.log(this.state.option);
}

componentDidMount() {
    // e.preventDefault();
    if (this.state.option) {
        return <div>{this.displayBooks(1)}</div>;
    }

    return <div>{this.displayBooks(0)}</div>;
}

render() {
    if (this.props.data.loading) {
        return <div>loading...</div>;
    }

        <div className="zero" style={{ height: '100%' }}>
            <div className="titlebar">
            <label>Select Option</label>
            {this.displayWarehouse()}
            </div>
        </div>
    );
}


export default graphql(fetchbooks)(Booklist);