После многочисленных попыток и незначительных перепадов я все еще не могу успешно вернуть объект по его идентификатору в моем интерфейсе React.Я продолжаю получать ту же ошибку «Не удается прочитать свойство« XXX »» в моем почтовом компоненте, даже если данные отображаются в соответствии с Redux Dev Console и несколькими console.logs.Я предоставил полный компонент Post вместе со всем другим соответствующим кодом ниже, но вот что я имею в виду ....
renderPost() {
console.log(this.props.post);
// { _id: '5d1d93348a966c08c1f4bedb',
// title: 'Testing getPost',
// user: '5d1129e503da62058a95c481', }
console.log(this.props.post.title);
// ERROR Cannot read property 'title' of undefined
return (
<div className="content">
<h4 className="title">POST.TITLE HERE</h4>
</div>
);}
Почему я могу получить доступ и вернуть this.props.post, но не что-то подобное.props.post.title?В бэкэнде все работает нормально через тестирование PostMan, поэтому я определенно напортачу кое-что здесь во внешнем интерфейсе, что будет означать либо создание действия getPost, редуктор GET_POST, либо компонент Post.
Честно говоря, я думаю, что это где-то в редукторе или пост-компоненте, но я вращаю свои колеса, одновременно ударяя головой о стену, так что любая помощь будет принята с благодарностью.
Имои извинения, если то, что я предоставил, является неясным или отсутствует.Я довольно новичок в программировании, и это моя первая публикация здесь, поэтому прошу прощения за любые неизбежные бедствия в обстановке.
getPost Action Creator
export const getPost = _id => async dispatch => {
const res = await axios.get(`/api/posts/${_id}`);
dispatch({ type: GET_POST, payload: res.data });
};
getPost Action Payload
{ type: 'GET_POST',
payload: {
_id: '5d1d93348a966c08c1f4bedb',
title: 'Testing getPost',
user: '5d1129e503da62058a95c481', }}
GET_POST Reducer
import { GET_POSTS, GET_POST } from '../actions/types';
import _ from 'lodash';
export default (state = {}, action) => {
switch (action.type) {
case GET_POSTS:
return { ...state, ..._.mapKeys(action.payload, '_id') };
case GET_POST:
return { ...state.post, [action.payload._id]: action.payload };
default:
return state; }
Состояние результирующих сообщений
{ posts: {
'5d1d93348a966c08c1f4bedb': {
_id: '5d1d93348a966c08c1f4bedb',
title: 'Testing getPost',
user: '5d1129e503da62058a95c481',
}}}
ПОСТ-КОМПОНЕНТ
import React from 'react';
import { connect } from 'react-redux';
import { getPost } from '../actions';
class Post extends React.Component {
constructor(props) {
super(props);
this.state = {
post: {}
};}
componentDidMount() {
this.props.getPost(this.props.match.params.id);
// using params._ID instead results in CastError:
// Cast to ObjectId failed for value "{ _id: 'undefined' }"
// at path "_id" for model "Posts" }
renderPost() {
return (
<div className="content">
<h4 className="title">WANT TO RETURN POST.TITLE HERE</h4>
</div>
);}
render() {
return (
<div className="content-top">
<div>{this.renderPost()}</div>
</div>
);}}
const mapStateToProps = (state, ownProps) => {
return { post: state.posts[ownProps.match.params.id] };
// ._id at the end results in post being undefined
};
export default connect(
mapStateToProps,
{ getPost })(Post);
Дополнительный код
MongoDB SCHEMA
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const postSchema = new Schema({
title: { type: String, required: true },
user: { type: Schema.Types.ObjectId, ref: 'Users' }
});
const Post = mongoose.model('Posts', postSchema);
module.exports = Post;
MongoDB НАЙТИ ПО МАРШРУТУ
const mongoose = require('mongoose');
const Post = mongoose.model('Posts');
app.get('/api/posts/:id', async (req, res) => {
const post = await Post.findById({ _id: req.params.id });
res.json(post);
});
REDUX REDUCERS
export default (state = {}, action) => {
switch (action.type) {
case GET_POSTS:
return { ...state, ..._.mapKeys(action.payload, '_id') };
// mapKeys is a function in Lodash that takes an array
// and returns an object. Whatever the value of ‘_id’
// is for an object inside an array is now the key for
// that object in a new state object.
case GET_POST:
return { ...state.post, [action.payload._id]: action.payload };
// Changing to action.payload.ID results in an undefined
// record being created in posts.
// { posts: {
// undefined: {
// _id: '5d1de8e47691dc12cc64b05c',
// title: 'xxxxxxxxx',
// user: '5d1129e503da62058a95c481' }}}
default:
return state;
}};
КОМПОНЕНТ ПОСТЛИСТА
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { getPosts } from '../actions';
class PostsList extends Component {
componentDidMount() {
this.props.getPosts(); }
renderPosts() {
return this.props.posts.map(post => {
return (
<div className="content" key={post._id}>
<h4 className="title">
<Link className="title" to={`/posts/${post._id}`}>
{post.title}
</Link>
</h4>
</div>
);});}
render() {
return (
<div className="content-top">
<div>{this.renderPosts()}</div>
</div>
);}}
const mapStateToProps = state => {
return {
posts: Object.values(state.posts)
};};
export default connect(
mapStateToProps,
{ getPosts }
)(PostsList);