javascript - 初始渲染后更新 View

Question

尝试着思考如何做到这一点......

我在 React Native 中有一个 View ，我想根据服务器中的一些信息显示/或隐藏该 View (使用 firebase.. 并不重要)。我可以成功地做到这一点，只需返回一个值，但如果我添加一个确定返回它的数据库调用，它就不起作用。

问题是查询返回速度很快，但可能无法在 View 加载时准确返回。因此，我认为当下面代码中的 If Loop 最终运行时，已经太晚了。 一旦我从数据库中获得了是否显示 View 所需的信息，有没有办法重新渲染 View 或重新加载 View ，以便在数据库返回 true 时 View 将显示

我还应该添加我正在查询数据库的内容，并将 this.props 中的一些信息传递到组件中

我当前的逻辑是(这可能不是语法，但我想你会明白这个问题的想法):

returnOtherComponent(){

/*
This is just psuedo code, as the web query is a big block of text that is uneeded
*/
DatabaseIsTrue = Returned True from Web

if(DatabaseIsTrue){
   return (
      <View>
        <Text> HELLO! </Text>
      </View>
   );
}
}

render(){
  return(
    <View>
      {this.returnOtherComponent()}
    </View>
  );
}

Answer 1

您应该使用您的state对象来更新 View 。

因此，当服务器请求返回时，您可以通过 setState() 更新组件 state，并且组件将重绘。

returnOtherComponent() {
    if (this.state.DatabaseIsTrue) {
        return (
            <View>
                <Text> HELLO! </Text>
            </View>
        );
    } else {
        return {}
    }
}

componentDidMount: function() {
    /*
      This is just psuedo code, as the web query is a big block of text that is uneeded
     */
     DatabaseIsTrue = Returned True from Web

    this.setState({
        DatabaseIsTrue: DatabaseIsTrue
    })
}

render(){
   return(
    <View>
      {this.returnOtherComponent()}
    </View>
   );
}