Javascript 尝试更改已选择的选项时，反应引导TypeAhead给出错误

所以我使用的是react bootstrap typeahead，当我在搜索框中键入内容时，它工作得非常好。当我在搜索框中键入以下内容时，它会为我提供相关选项：

  onChange={(selectedOption) => this.setState({ searchName: selectedOption }, () => {
                                console.log('selected option: ', selectedOption);
                            })}

但是，当我选择其中一个选项，然后尝试重新更改文本时，它会抛出一个错误。这就是我选择1选项时的样子

这就是它抛出的错误：TypeError:“无法读取未定义的”的属性“match”

以下是具有Typeahead的搜索组件的状态：

 class Search extends Component {
state = {
    hcpName: [],
    hcps: [],
    searchName: '',
    isLoading: false,
    hcp_id: 101,
    searchSelectedOption: ''
}

这是我正在使用的字体：

   <div className='col-md-3'>
                    <div class="form-group">
                        <Typeahead
                            id="basic-example"
                            options={this.state.hcpName}
                            placeholder="Search by Name..."
                            emptyLabel={this.state.isLoading ?
                                <>
                                    <span>Searching...
                                        <Loader
                                            style={{ paddingLeft: '5px', display: 'inline' }}
                                            type="Circles"
                                            color="#0caf8d"
                                            height={15}
                                            width={20}
                                            radius={30}
                                        />
                                    </span>
                                </>
                                : ''}
                            isLoading={this.state.isLoading}
                            onInputChange={(searchName) => this.setState({ searchName }, () => {
                                {
                                    let nameValue = this.state.searchName;
                                    this.setState({ isLoading: true })
                                    axios.post('/get-hcp-data', {
                                        nameValue: nameValue
                                    })
                                        .then((res) => {
                                            const hcps = res.data;
                                            this.setState({ hcps: hcps, hcpName: Object.values(hcps.hcp_details_concat) })
                                            this.setState({ isLoading: false })
                                        }, (error) => {
                                            console.log(error);
                                        });
                                }
                            })}
                            onChange={(selectedOption) => {
                                console.log('selected option: ', selectedOption[0]);
                                console.log('npi id selected', selectedOption[0].replace(/(^.*\[|\].*$)/g, ''));
                                console.log('parsed npi id selected', parseInt(selectedOption[0].replace(/(^.*\[|\].*$)/g, '')[0]));
                                this.setState({hcp_id: parseInt(selectedOption[0].match(/[^[\]]+(?=])/g)[0])});
                            }}
                        />
                    </div>
                </div>

this.setState（{searchName}，（）=>{
{
让nameValue=this.state.searchName；
this.setState（{isLoading:true}）
axios.post（“/get hcp data”{
nameValue:nameValue
})
。然后（（res）=>{
常数hcps=分辨率数据；
this.setState（{hcps:hcps，hcpName:Object.values（hcps.hcp_details_concat）}）
this.setState（{isLoading:false}）
}，（错误）=>{
console.log（错误）；
});
}
})}
onChange={（selectedOption）=>{
log（'selected option:'，selectedOption[0]）；
console.log（'npi id selected'，selectedOption[0]。替换（/（^.*\[\\].*$）/g'，）；
log（'parsed npi id selected'，parseInt（selectedOption[0].replace（/（^.*\[|\].*$）/g'，）[0]）；
this.setState（{hcp\u id:parseInt（selectedOption[0].match（/[^[\]]+（？=]）/g）[0]）；
}}
/>

在Typeahead内部的“onInputChange”中，我基本上是在用户每次输入键盘后进行api调用。这就是为什么你可以在那里看到axios请求。在“onChange”中，我提取了用户选择的方括号内的数字

正如我提到的，当我试图更改已选择选项的文本时，我会遇到一个错误。例如，假设我单击[101]Anna，我会在搜索栏中看到该文本。当我再次尝试修改它时，我立即看到一个错误。可能的原因是什么

以下是onInput更改的控制台日志：

---

我解决了这个问题，因为我发现在onChange of Typeahead中不能使用match/replace函数，所以我在获取api数据时直接使用了它。为此，我首先根据用户的选择设置状态，如下所示：

  onChange={(selectedOption) => this.setState({ searchName: selectedOption }, () => {
                                console.log('selected option: ', selectedOption);
                            })}

然后在获取数据时，我使用searchName状态来运行replace函数

  dataFetch = () => {
    this.setState({ receivedData: [], loading: true });
    let page_id = this.state.page_id;
    let hcp_id = parseInt(this.state.searchName[0].replace(/(^.*\[|\].*$)/g, ''));
    axios.post('/test-json', {
        page_id: page_id,
        hcp_id: hcp_id
    })
        .then((res) => {
            this.setState({ receivedData: res.data, loading: false });
            console.log('State after loading data: ', this.state);
        }, (error) => {
            this.setState({ error: true });
            console.log(error);
        });
}

---

如果有人对代码有任何疑问，请告诉我。抛出错误的行中selectedOption包含什么？你能把它记录下来吗？通常，onChange方法会给您一个事件对象，而不是数组。selectedOption包含[101]Anna，这是我选择的选项。我认为问题在于使用match。当我删除匹配代码时，我发现没有问题。我基本上是使用match和regex从[101]Anna中提取数字'101'。您知道不使用match提取该数字的方法吗？您的错误是，

selectedOption[0]

未定义。您确定selectedOption是一个数组，其第一个元素为字符串

[101]Anna

。我已经编辑了我的问题，在其中为控制台日志添加了代码和相应的屏幕截图。