Question

I am trying to see if a user session already exists, and if it doesn't render a different button option

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}>$0.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>
)

I am then {actionButton} to render the result, the problem I am having is that isn't returning a result

Answer 1

将firebase auth侦听器放在render函数中不是一个好主意。因为只要状态更新，它就会再次渲染，再次调用firebase auth listener。最佳位置（截至我）为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}>$0.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 check if user session

1 个答案: