我遇到了一个无法解决的错误。我正在建立一个博客网站作为一个副项目。现在我正在尝试呈现单个帖子,但是当我尝试访问对象属性时,我收到一个错误TypeError:无法读取 null 的属性“标题”。我不明白为什么对象属性为空,尽管我可以打印对象本身。以下是代码片段:
这是一个 PostView 组件,它将处理帖子内容的呈现。我可以在控制台中打印从 api 接收到的 post 对象,但是当我尝试访问或打印其属性(如标题、正文等)时……我收到错误消息。起初我以为我在 redux reducers 和 actions 上有错误,但它似乎工作正常。状态正在改变,我收到了 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,所以任何帮助将不胜感激。强文本
答案 0 :(得分:0)
错误 TypeError: Cannot read property 'title' of null.
表示在某个时刻,您正在从 null
的值读取属性,这将导致错误。
从您的代码中,您在减速器中将 post
的初始状态设置为 null
,因此,有一段时间 prop post
为 {{1} },错误就是从这一刻开始的。
null
只更新非 post
值(假设 ajax 调用会响应一些数据),并且可以在 null
完成后安全访问。
答案 1 :(得分:0)
这可能是因为您的 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: {}
}