正在尝试映射我存储在数组中的一些数据(下面的屏幕截图),但我似乎无法访问它,因为它是异步加载的。我怎样才能等待数据?有没有办法在渲染函数中做到这一点?
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
关于javascript - 如何在映射数组之前等待设置为状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68613454/