javascript - 如何在映射数组之前等待设置状态?
问题描述
'正在尝试映射我存储在数组中的一些数据(下面的屏幕截图),但我似乎无法访问它,因为它是异步加载的。我怎么能等待数据?有没有办法在渲染功能中做到这一点?
render() {
return (
{this.state.serials.map((number) => {
return number.s && number.s.length?
(
<h2 > {number.s[0].a}</h2>
) : null
})}
)
}
这是我获取数据的 componentDidMount() :
componentDidMount()
const uid = this.state.user.uid;
const gatewayRef = db.ref(uid + '/gateways');
gatewayRef.on('value', (gateways_nums) => {
const serialsArr = [];
gateways_nums.forEach((gateway_num) => {
const serialRef = db.ref('gateways/' + gateway_num.val()['gateway'])
const last_temps =[];
serialRef.on('value', (serials)=>{
const ser = []
serials.forEach((serial)=>{
ser.push(serial.val()['serial'])
})
last_temps.push({a: gateway_num.val()['gateway'], b: ser})
})
serialsArr.push({s:last_temps})
});
this.setState({serials:serialsArr})
});
}
我真的很感激任何帮助!
解决方案
尝试这个:
render() {
if(!this.state.serials) {
// Ideally you should draw some loading spinner here
// to indicate that data is not ready yet. But for a quick
// solution you can just draw nothing
return null
}
// Also "return ({ this.state.serials.map() })" is not valid syntax
// you either need to return just an array without using braces, or
// use some JSX tag and put braces inside of it
return (
<div>
{this.state.serials.map(serial => ...)}
</div>
)
}
说到带大括号的无效语法,您也可以这样做
return this.state.serials.map(serial => ...)
或更好)
return (
<>
{this.state.serials.map(serial => ...)}
</>
)
如果您不希望数据周围有额外的 div
推荐阅读
- json - 从 FileManager 解码 json - WidgetKit
- vba - MS Access(64 位)VBA 文件复制问题
- discord.js - UnhandledPromiseRejectionWarning:TypeError:无法读取未定义的属性“startsWith”
- npm - Git FTP没有在bitbucket管道中推送构建文件夹
- qt - 使用 QML 在 Qt 上创建动态 MapQuickItem
- sqlite - 网络驱动器上的 sqlite 格式错误
- php - 在 Hostinger 上的 hPanel 上运行 cron 作业
- arduino - 使用 ios 构建 arduino 智能手表
- c# - 尝试更改 Sharepoint List 用户 REST 和 .NET 中的项目时出现错误请求
- wget - 使用 wget 从 index.html url 下载文件列表