Question

我的反应原生项目有问题。当我使用firebase登录并将数据存储到 AsyncStorage 时，它会在第一次登录时收到错误消息。但是第二次，此错误不会显示。我真的很困惑这个问题。

Dashboard.js

constructor(props){
    super(props);
    this.state= {
        user: null,
        loading: true,
    }
}

componentWillMount() {
    AsyncStorage.getItem('userData').then((user_data_json) => {
        let userData = JSON.parse(user_data_json);
        this.setState({
            user: userData,
            loading:false
        });
        console.log(this.state.user)
    });
}

Logout(){
    AsyncStorage.removeItem('userData').then(() => {
        firebase.auth().signOut().then(() => {
            this.props.navigation.navigate('Login')
        });

    });
    console.log(this.state.user)
}

render() {
    if(this.state.loading){ 
        return <ActivityIndicator size="large" />
    }
    return(
        <View>
            <Text style={styles.title}> Hello {this.state.user.email} </Text>
            <Button title="Log Out" onPress={this.Logout.bind(this)} />
        </View>
    )
}

}

Answer 1

现在您正在尝试访问<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select data-table="assessment_rating" data-field="x_RATING" data-value-separator=", " id="x5_RATING" name="x5_RATING" class="form-control"> <option value="">Please select</option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option></select> <select data-table="assessment_rating" data-field="x_RATING" data-value-separator=", " id="x7_RATING" name="x7_RATING" class="form-control"> <option value="">Please select</option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option></select>，但您的初始状态将this.state.user.email设置为null。如果将初始状态更改为空对象，则此错误将消失：

user

Answer 2

问题出在以下几行： -

<Text style={styles.title}> Hello {this.state.user.email} </Text>

有时setState需要一些时间来设置状态，在setState完成其工作之前调用render，在这种情况下， this.state.user 在此之前不可用，所以它会抛出错误。因此，您可以执行以下操作以避免将来在渲染中使用状态变量时出现此类错误： -

<Text style={styles.title}> Hello {this.state.user && this.state.user.email} </Text>

或者您也可以在构造函数中将用户变量声明为： -

constructor(props) {
   this.state = {
       user:{ email: ''}
   }

可能的未处理的Promise拒绝（id：0）：TypeError：TypeError：无法读取null的属性“email”

2 个答案: