React-Bootstrap-TypeAhead 在尝试更改已选择的选项时出错
React-Bootstrap-TypeAhead giving error when trying to change already selected option
所以我正在使用 react-bootstrap-typeahead,当我在搜索框中输入内容时,它工作得很好。当我在搜索框中输入如下内容时,它会为我提供相关选项:
但是,当我 select 选择一个选项然后尝试重新更改文本时,它会抛出错误。这是我 select 1 个选项时的样子。
这是它抛出的错误:TypeError: 'Cannot read 属性 'match' of undefined'
这是具有 Typeahead 的搜索组件的状态:
class Search extends Component {
state = {
hcpName: [],
hcps: [],
searchName: '',
isLoading: false,
hcp_id: 101,
searchSelectedOption: ''
}
这是我正在使用的 Typeahead:
<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>
在 Typeahead 的 'onInputChange' 内部,我基本上是在用户输入的每次击键后进行 api 调用。所以这就是为什么你可以在那里看到一个 axios 请求。在 'onChange' 中,我提取了用户 selection.
方括号内的数字
正如我提到的,当我尝试更改已经 selected 选项的文本时遇到错误。例如,假设我点击了 [101]Anna,我在搜索栏中看到了该文本。当我再次尝试修改它时,我立即看到错误。这可能是什么原因?
这是 onInput 更改的控制台日志:
我通过确定 match/replace 函数不能在 Typeahead 的 onChange 内部使用来解决问题,所以我在获取 api 数据时直接使用它。为此,我首先根据用户的选择设置状态:
onChange={(selectedOption) => this.setState({ searchName: selectedOption }, () => {
console.log('selected option: ', selectedOption);
})}
然后在获取数据时,我利用 searchName 状态 运行 替换功能。
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);
});
}
所以我正在使用 react-bootstrap-typeahead,当我在搜索框中输入内容时,它工作得很好。当我在搜索框中输入如下内容时,它会为我提供相关选项:
但是,当我 select 选择一个选项然后尝试重新更改文本时,它会抛出错误。这是我 select 1 个选项时的样子。
这是它抛出的错误:TypeError: 'Cannot read 属性 'match' of undefined'
这是具有 Typeahead 的搜索组件的状态:
class Search extends Component {
state = {
hcpName: [],
hcps: [],
searchName: '',
isLoading: false,
hcp_id: 101,
searchSelectedOption: ''
}
这是我正在使用的 Typeahead:
<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>
在 Typeahead 的 'onInputChange' 内部,我基本上是在用户输入的每次击键后进行 api 调用。所以这就是为什么你可以在那里看到一个 axios 请求。在 'onChange' 中,我提取了用户 selection.
方括号内的数字正如我提到的,当我尝试更改已经 selected 选项的文本时遇到错误。例如,假设我点击了 [101]Anna,我在搜索栏中看到了该文本。当我再次尝试修改它时,我立即看到错误。这可能是什么原因?
这是 onInput 更改的控制台日志:
我通过确定 match/replace 函数不能在 Typeahead 的 onChange 内部使用来解决问题,所以我在获取 api 数据时直接使用它。为此,我首先根据用户的选择设置状态:
onChange={(selectedOption) => this.setState({ searchName: selectedOption }, () => {
console.log('selected option: ', selectedOption);
})}
然后在获取数据时,我利用 searchName 状态 运行 替换功能。
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);
});
}