我正在尝试从API调用之后的状态动态加载表单，该操作已在中完成componentDidMount()。API调用成功，并setState()在languageList完成后被.map()调用，但该调用不返回任何选项。它什么也不返回。
componentDidMount() {
let languages = []
base('Languages').select({
view: 'Grid view'
}).firstPage(function(err, records) {
if (err) {console.error(err); return; }
records.forEach(function(record) {
let languageObject = {}
languageObject['id'] = record.id
languageObject['name'] = record.get('Language Name')
languages.push(languageObject)
})
})
this.setState({
languageList: languages,
})
}
render() {
return (
...
<select>
{this.state.languageList.map((language, key) => (
<option key={key} value={language.id}>{language.name}</option>
))}
</select>
)
}
我已经验证了这state.languageList是一个对象数组，每个对象都有id和name。
我想念什么？
将移至setStateAPI回调中。...当数据可用时
您正在接收数据之前调用它，因为它是异步的
base('Languages').select({
view: 'Grid view'
}).firstPage((err, records) => {// arrow function to not block `this`
if (err) {
console.error(err);
return;
}
records.forEach(function(record) {
let languageObject = {}
languageObject['id'] = record.id
languageObject['name'] = record.get('Language Name')
languages.push(languageObject)
})
// languages array has been updated here
this.setState({
languageList: languages,
})
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句