Firebase 检查用户会话

Question

我正在尝试查看用户会话是否已存在，以及它是否不呈现不同的按钮选项

render () {
var actionButton = [];
firebaseApp.auth().onAuthStateChanged(function(user) {
  if (user) {
    actionButton.push(
      <RoundedButton onPress={() => { NavigationActions.SubmitScreen() }} text='Place Order' />
    )
  } else {
    actionButton.push(
      <RoundedButton onPress={() => { NavigationActions.Login({hide: false}) }} text='Login to Place Order' />
    )
  }
})
return (
  <View style={styles.container}>
    <View style={styles.currentBalance}>
      <Text style={styles.currentBalanceTitle}>CURRENT BALANCE</Text>
      <Text style={styles.currentBalanceAmount}>[=10=].00</Text>
    </View>
    <AlertMessage title='Nothing to See Here, Move Along' show={this._noRowData()} />
    <View style={styles.heaader}>
      <Text style={styles.item}>Item</Text>
      <Text style={styles.price}>Price</Text>
    </View>
    <ListView
      contentContainerStyle={styles.listContent}
      dataSource={this.state.dataSource}
      renderRow={this._renderRow.bind(this)}
      enableEmptySections
      pageSize={15}
    />
    {actionButton}
  </View>
)

然后我{actionButton}渲染结果，我遇到的问题是没有返回结果

Answer 1

将 firebase 身份验证侦听器放在渲染函数中不是一个好主意。因为每当状态更新时，它会再次呈现，再次调用 firebase auth 侦听器。最好的地方（对我来说）是 ComponentDidMount 或 constructor 并相应地改变状态。或者，您可以使用状态管理（如 redux）来检查用户是否登录。

尝试以下代码段：

class Orders extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false
        }
    }

    componentDidMount() {
        let listener = firebaseApp.auth().onAuthStateChanged((user) => {
            if (user) {
                this.setState({
                    isLoggedIn: true
                })
                listener();
            } else {
                this.setState({
                    isLoggedIn: false
                })
                listener();
            }
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.currentBalance}>
                    <Text style={styles.currentBalanceTitle}>CURRENT BALANCE</Text>
                    <Text style={styles.currentBalanceAmount}>[=10=].00</Text>
                </View>
                <AlertMessage title='Nothing to See Here, Move Along' show={this._noRowData()} />
                <View style={styles.heaader}>
                    <Text style={styles.item}>Item</Text>
                    <Text style={styles.price}>Price</Text>
                </View>
                <ListView
                    contentContainerStyle={styles.listContent}
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow.bind(this)}
                    enableEmptySections
                    pageSize={15}
                />
                {this.state.isLoggedIn
                    ? <RoundedButton onPress={() => { NavigationActions.SubmitScreen() }} text='Place Order' />
                    : <RoundedButton onPress={() => { NavigationActions.Login({ hide: false }) }} text='Login to Place Order' />
                }
            </View>
        )
    }
}

您应该取消订阅 Firebase 身份验证侦听器以避免出现不良行为。

Firebase 检查用户会话

Firebase check if user session

dynamic-content

firebase

react-native

firebase-authentication