对象类型错误：无法读取 null 的属性“标题”

Posted 2023-03-07

【中文标题】对象类型错误：无法读取 null 的属性“标题”

【英文标题】：Object TypeError: Cannot read property 'title' of null

【发布时间】：2021-04-14 17:22:47

【问题描述】：

我遇到了一个我无法解决的错误。我正在建立一个博客网站作为一个副项目。现在我正在尝试呈现单个帖子，但是当我尝试访问对象属性时，我收到一个错误 TypeError: Cannot read property 'title' of null。我不明白为什么对象属性为空，尽管我可以打印对象本身。这是sn-ps的代码：

这是一个 PostView 组件，它将处理帖子内容的呈现。我可以在控制台中打印我从 api 收到的 post 对象，但是当我尝试访问或打印它的属性（如标题、正文等）时......我收到了一个错误。起初我以为我在 redux 减速器和操作中有错误，但它似乎工作正常。状态正在发生变化，我收到了 json 响应。我对我的其他组件使用了类似的代码并且它有效，所以我不明白我在哪里犯了错误？

import React, useEffect, useState  from 'react';
import PropTypes from 'prop-types';
import  connect  from 'react-redux';
import  getPost from 'actions/post';

//Components
import PostContent from '../Content/PostContent';

//Material Ui 
import  Grid  from '@material-ui/core';
import  useStyles  from '@material-ui/core/styles';




const PostView = ( getPost, post: post:  title, body, category , loading , match) => 
    useEffect(() => 
        getPost(match.params.id);
    ,[getPost]);
    
    //This code works
    console.log(post);
    //But this one does not
    console.log(post.title);

    return (
            <Grid container>
                <PostContent/>
            </Grid>
    )


PostView.propTypes = 
    getPost: PropTypes.func.isRequired,
    post: PropTypes.object.isRequired,


const mapStateToProps = (state) => (
    post: state.post
);

export default connect(mapStateToProps,  getPost )(PostView)

这也是我的动作函数：

//Get Post by Id
export const getPost = (id) => async dispatch => 
    try 
        const res = await axios.get(`/api/posts/$id`);
        dispatch(
            type: GET_POST,
            payload: res.data
        );
    catch(err)
        dispatch(
            type: POST_ERROR,
            payload: msg: err.response.statusText, status: err.response.status
        );
    

;

还有 post reducer 文件：

import
    GET_POSTS,
    POST_ERROR,
    UPDATE_VOTES,
    ADD_POST,
    GET_POST,
    GET_POSTS_IMAGE,
    POSTS_IMAGE_ERROR
 from '../actions/types';


const initialState = 
    posts: [],
    post: null,
    loading: true,
    status: true,
    error: 




export default function(state = initialState, action) 
    const  type, payload  = action;

    switch (type) 
        case GET_POSTS:
            return
                ...state, 
                posts: payload,
                loading: false
            ;
        case POST_ERROR:
            return
                ...state, 
                error: payload,
                loading: false
             ;
        case UPDATE_VOTES:
            return
                ...state,
                posts: state.posts.map(post => post._id === payload.postId ?  ...post, upVotes: payload.upVotes : post),
                loading: false
            ;  
        case ADD_POST:
            return
                ...state,
                posts: [...state.posts, payload],
                loading: false,
                status: false
            ;
        case GET_POST:
            return
                ...state,
                post: payload,
                loading: false
            
        default:
            return state;
    

我只学习 react 和 redux，所以任何帮助将不胜感激。strong text

【问题讨论】：

既然你解构了PostView中的props，那不应该是console.log(title);来记录title值吗？除非我遗漏了什么，否则 post 甚至不应该在该块中定义。

【参考方案1】：

错误TypeError: Cannot read property 'title' of null. 表示在某些时候，您正在从值null 读取属性，这将导致错误。

从你的代码中，你在reducer中将post的初始状态设置为null，结果，有一个时刻post是null，错误就是从这个时刻开始的.

post 仅更新为非null 值（假设ajax 调用将响应一些数据），并且可以在getPost 完成后安全访问。

【参考方案2】：

这可能是因为您的 Redux 初始状态 post 为 null 并且您正在尝试读取 null 的某些属性。

尝试添加一些条件，例如：

if(post && post.title) 
  console.log(post.title)

或者改变你的 Redux 初始状态：

const initialState = 
    posts: [],
    post: 
      title: "",
      body: "",
      ...etc
    ,
    loading: true,
    status: true,
    error: