如何为react-bootstrap-typeahead设置所选值

Question

我创建了一个员工表单，该表单分为多个分区，表单中的一个字段是主管，我使用 react-bootstrap-typeahead 来 autocomplete < / strong>主管。选择值后，我可以获取选定的值 e，但是当我使用导航按钮转到表单的下一部分时（我将点击下一个隐藏当前分区）按钮）并再次返回上一个分区，该值再次为空。我无法理解我做错了什么？

<div className = "form-group row col-md-6">
     <label className="col-sm-4 col-form-label">Supervisor: </label>
          <div className = "col-sm-6">
               <Typeahead ref="typeahead"
                 labelKey={option => `${option.firstName} ${option.lastName}`}
                 onChange = {this.supervisorSelected}
                 options= {this.state.supervisorOptions}/>
          </div>
</div>

//onChange function
supervisorSelected(selectedSupervisor){
        console.log(selectedSupervisor);
        if(selectedSupervisor.length != 0){
            this.setState({
            selectedSupervisor : selectedSupervisor[0].employeeId,
        })
        console.log(this.state.selectedSupervisor);    
        }
    }