× TypeError: 无法读取 null 的属性“名称”

Posted 2023-02-19

【中文标题】× TypeError: 无法读取 null 的属性“名称”

【英文标题】：× TypeError: Cannot read property 'name' of null

【发布时间】：2021-10-14 16:03:42

【问题描述】：

您好，我正在尝试使用 react-redux Firebase react navigation 等制作 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

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

谢谢你

【问题讨论】：

打印什么 `console.log( currentUser, posts )`

console.log( currentUser, posts ) 为您提供currentUser 的正确值？

您的 currentUser 可能未正确获取，并且在您的 redux 商店中不可用。尽管修复了您的获取问题，但您可以将 currentUser 设为可选，例如 currentUser?.name，以防止您的应用在用户为 null 时崩溃。

@GiovanniEsposito 是的，确实如此，我这样做只是为了看看是否一切正常，但事实并非如此。

@PRSHL 我做到了，错误消失了，但我不明白我自己登录并注册随机测试电子邮件一切都很好，但如果我查看控制台，currentUser 为空。你能解释一下为什么吗？并感谢您的帮助:)

【参考方案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>

【讨论】：

currentUser: store.userState.currentUser ?? , in mapStateToProps 可能更干净一点。通常我会在这里编写一个选择器函数，如果部分未定义，则返回有效状态。

我试过错误消失了，但它没有显示任何用户信息。不知道，可能我理解的不对。 ://

@chin14 可能与currentUser 没有有效值有关。您是否仔细检查过 currentUser 是否正确来自 firebase？

@GiovanniEsposito 是的，这就是我如此困惑的原因

@chin14 我看到你更新了问题。让我看看有没有发现什么...