如何解决使用react-select
我对使用React非常陌生。我正在使用react-select提供下拉菜单,并尝试动态设置下拉菜单的选项。这是我在做什么:-
constructor(props) {
super(props);
this.printlist = this.printlist.bind(this);
this.state = {
checked: false,values: [],mylist: [],myoptions:[]
};
}
componentDidMount() {
console.log("inside component did mount")
var configservice = new AWS.ConfigService();
var params = {
ConfigurationAggregatorNames: [
'Proserve'
]
};
// I make a AWS config call to get the items for myoptions list as follows
configservice.describeConfigurationAggregators(params,function(err,data) {
if (err) console.log(err,err.stack); // an error occurred
else {
console.log("accounts in config call: ",data.ConfigurationAggregators[0].AccountAggregationSources[0].AccountIds);
accounts = data.ConfigurationAggregators[0].AccountAggregationSources[0].AccountIds
console.log("accounts are: ",accounts)
var a;
for (a = 0; a < accounts.length; a++) {
console.log("inside for loop")
var oj = { label: "",value: 0 }
oj.label = (accounts[a])
oj.value = accounts[a]
options.push(oj) //construct an array of objects
}
console.log("options are: ",options)
} // successful response
});
this.setState({myoptions:options})
console.log("myoptions are: ",this.state.myoptions)
}
我面临的问题有时是当我刷新网页并尝试从下拉菜单中选择时,这些选项以“无选项” /无显示。我认为由于我在componentDidMount函数内部进行的配置调用是异步的,因此在加载结果花费时间时会导致问题。我添加了一些console.log语句,但是根据观察,如果刷新页面并尝试立即从下拉列表中选择选项,它将显示None。但是我看到我的for循环已执行,并且选项中确实有项目。。但是“ myoptions”的console.log语句未打印。附加了屏幕快照以供参考。任何解决此问题的建议都将受到赞赏。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。