如何使用react native验证渲染返回中的条件

Question

在我的场景中，我试图在render return中创建一个validation逻辑。我有asycstorage值，我正在获取值，并使用以下代码进行验证

render() {
const value = AsyncStorage.getItem(‘username’);
return (
{value !== null &&
(<View
……………..
</View> )}
)}

上面的代码没有验证，也基于验证结果，它没有呈现。若值不等于null表示，我需要渲染视图。如何做到这一点？

Answer 1

如前所述，AsyncStorage返回一个promise。做你想做的事情的一种方法是使用状态来知道承诺何时完成。但是，您必须在渲染之前调用AsyncStorage函数。

didComponentMount() {
AsyncStorage.getItem(‘username’).then((res)=>{this.setState({gotUsername: true}); value = res;});
}
render(){
if(!this.state.gotUsername) {
return value !== null &&
(<View
</View> )
}
}