× TypeError: Cannot read property 'name' of null

Question

嗨，我正在尝试使用 react-redux Firebase 反应导航等制作 Instagram 克隆

现在我只能显示用户的姓名和电子邮件等信息。我不知道代码有什么问题，但我收到了这个错误。

配置文件代码：

import React from 'react'
import { StyleSheet, View, Text, Image, FlatList } from 'react-native'
import { connect } from 'react-redux';

 function Profile(props) {
     const{ currentUser, posts } = props;
     console.log({ currentUser, posts })
    return (
        <View style={styles.container}>
            <View style={styles.containerInfo}>

                <Text> {currentUser.name} </Text>
                <Text> {currentUser.email} </Text>
            </View>
            <View style={styles.containerGallery}>
                <FlatList
                    numColumns={3}
                    horizontal={false}
                    data={posts}
                    renderItem={({item}) => (
                        <Image
                            style={styles.image}
                            source={{uri: item.downloadURL}}
                        />
                    )}
                />
            </View>
        </View>
    )
}
const styles = StyleSheet.create({
    container:{
        flex: 1,
        marginTop: 40,
    },
    containerInfo:{
        margin: 20,
    },
    containerGallery:{
        flex:1,
    },
    image:{
        flex: 1,
        aspectRatio: 1/1
    }
})
const mapStateToProps = (store) => ({
    currentUser: store.userState.currentUser,
    posts: store.userState.posts,
})

export default connect(mapStateToProps, null)(Profile);

登录码：

import { ThemeProvider } from '@react-navigation/native';
import React, { Component } from 'react'
import { ViewBase, Button, TextInput, View } from 'react-native'
import firebase from 'firebase';

export class Login extends Component {
    constructor(props){
        super(props);

        this.state = {
            email: '',
            passwort: '',
           
        }
        
        this.onSignUp = this.onSignUp.bind(this)
    }
    onSignUp(){
        const { email, password, name } = this.state;
        firebase.auth().signInWithEmailAndPassword(email, password)
        .then((result) =>{
            console.log(result)
        })
        .catch((error) =>{
            console.log(error)
        })
    }

    render() {
        return (
            <View>
               
                   <TextInput
                    placeholder="email"
                    onChangeText={(email) => this.setState({ email })}
                />
                   <TextInput
                    placeholder="password"
                    secureTextEntry={true}
                    onChangeText={(password) => this.setState({ password })}
                />

                <Button
                    onPress={() => this.onSignUp()}
                    title="Sing in"
                />
            </View>
        )
    }
}

export default Login

用户密码：

import { USER_STATE_CHANGE, USER_POSTS_STATE_CHANGE } from "../constants"

const initalState = {
    currentUser: null,
    posts: []
}

export const user = (state = initalState, action) => {
    switch(action.type){
        case USER_STATE_CHANGE:
            return {
                ...state,
                currentUser: action.currentUser
            }
            case USER_POSTS_STATE_CHANGE:
            return {
                ...state,
                posts: action.posts
            }
            default:
                return state
    }
    
}

注册码：

import { USER_STATE_CHANGE, USER_POSTS_STATE_CHANGE } from "../constants"

const initalState = {
    currentUser: null,
    posts: []
}

export const user = (state = initalState, action) => {
    switch(action.type){
        case USER_STATE_CHANGE:
            return {
                ...state,
                currentUser: action.currentUser
            }
            case USER_POSTS_STATE_CHANGE:
            return {
                ...state,
                posts: action.posts
            }
            default:
                return state
    }
    
}

Index.js:

import { combineReducers } from 'redux'
import { user } from './user'


const Reducers = combineReducers({
    userState: user
})

export default Reducers

我真的不知道你们都需要从代码中看到什么来帮助我，但是如果我需要用更多信息更新 post 请告诉我，不要阻止 post!

谢谢你

Answer 1

您的问题与渲染组件时 currentUser 没有有效值这一事实有关。你有几种方法可以解决这个问题：

条件渲染：在html上设置条件：

     <View style={styles.containerInfo}>

         {currentUser && <Text> {currentUser.name} </Text>}
         {currentUser && <Text> {currentUser.email} </Text>}
     </View>

使用?运算符：

     <View style={styles.containerInfo}>

         <Text> {currentUser?.name} </Text>
         <Text> {currentUser?.email} </Text>
     </View>

× TypeError: Cannot read property 'name' of null

× TypeError: Cannot read property 'name' of null

reactjs

react-native

react-redux

expo