중포 기지 체크하면 사용자 세션

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

렌더링하지 않는 경우 그때 {actionButton} 오전, 문제 I 갖는 데있어 결과를 반환하지 않습니다.

Answer 1

렌더링 기능에 firebase auth listener를 추가하는 것은 좋지 않습니다. 상태가 업데이트 될 때마다 다시 렌더링 할 수 있기 때문에 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> 
     ) 
    } 
} 

당신은 중포 기지의 인증 리스너에서 탈퇴해야 원치 않는 행동을 방지 할 수 있습니다.