尽管传递了相关状态

时间:2021-03-05 12:14:44

标签: javascript reactjs axios typeahead react-bootstrap-typeahead

每当用户按下“搜索”字段上的按钮但无法这样做时,我想添加一个加载程序或一个简单的文本,例如“正在搜索...”。代码如下:

    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 功能都不起作用。有什么原因吗?

正在获取数据,但加载程序部分不起作用。

0 个答案:

没有答案
相关问题