如何使用本机反应验证渲染返回中的条件？答案

【问题标题】：How to validate condition in render return using react native?如何使用本机反应验证渲染返回中的条件？
【发布时间】：2020-08-03 20:32:29
【问题描述】：

在我的场景中，我试图在渲染返回中创建 validation 逻辑。我有asycstorage 值，我正在获取价值并使用以下代码进行验证

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

上面的代码也没有根据验证结果进行验证，它没有呈现。如果值不等于空值，我需要渲染视图。如何做到这一点？

【问题讨论】：

AsyncStorage 返回一个承诺。所以你不能像上面那样处理它。
@SDushan 请推荐一些其他的好方法。
不要在渲染函数内部调用，在componentDidMount或useEffect内部调用。

标签： android ios typescript react-native

【解决方案1】：

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

didComponentMount() {
    AsyncStorage.getItem(‘username’).then((res)=>{this.setState({gotUsername: true}); value = res;});
}

render(){
    if(!this.state.gotUsername) {
        return value !== null &&
         (<View

         </View> )
    }
}

【讨论】：

render 应该始终保持纯净。在render 中调用setState 是一种非常糟糕的做法。
@Terry 我将异步值存储在同一个 didcomponentmount 中。在同一个地方存储和获取我正在做的事情
@questanswer 我不确定我明白你的意思吗？
@Terry 存储 AsyncStorage.setItem('username', 'jack');我也在做同样的 didComponentMount() 并且根据你的回答得到项目我也需要做同一个地方。这是个好方法吗？
@questanswer 所以如果我理解得很好，您是在 didComponentMount() 中设置用户名吗？如果您已经知道用户名，为什么还需要检索它？也许您可以使用有关组件逻辑的更多详细信息来更新您的代码。