每当用户按下“搜索”字段上的按钮但无法这样做时,我想添加一个加载程序或一个简单的文本,例如“正在搜索...”。代码如下:
fetchingDataOnChange = () => {
let nameValue = this.state.searchName;
var myParams = {
nameValue: nameValue
}
axios.post('/get-hcp-data', myParams)
.then((res) => {
const hcps = res.data;
this.setState({ isLoading: true })
console.log('State before loading data: ', this.state);
this.setState({ hcps: hcps, hcpName: Object.values(hcps.hcp_details_concat) })
console.log('HCP Data values on typeahead: ',
Object.values(this.state.hcps.hcp_details_concat));
console.log(res);
this.setState({ isLoading: false })
console.log('State after loading data: ', this.state);
}, (error) => {
console.log(error);
});
}
<Typeahead
id="basic-example"
options={this.state.hcpName}
placeholder="Search by Name..."
emptyLabel={this.state.isLoading ? "Searching..." : ''}
isLoading={this.state.isLoading}
onInputChange={(searchName) => this.setState({ searchName }, this.fetchingDataOnChange)}
/>
如您所见,我还尝试了控制台日志记录,并且状态正在适当更改,但 emptyLabel 和 isLoading 功能都不起作用。有什么原因吗?
正在获取数据,但加载程序部分不起作用。