Блог

Я использую перехваты для получения доступа к данным и при необходимости консоли.регистрируя данные первого уровня, я получаю все, включая объекты, вложенные в исходный объект. Если я пытаюсь получить доступ к каким-либо данным, они возвращаются undefined .

Компонент, получающий доступ к данным

 import React, { useContext, useEffect } from 'react';

import { GlobalContext } from '../contexts/GlobalState';

export default function BlogDetail(props) {
    const { blogPostToEdit, getBlogWithId } = useContext(GlobalContext);

    useEffect(() => {
        getBlogWithId(props.match.params.id)
    }, [])

    const { title, content, tags, date, userId } = blogPostToEdit;
    const parsedDate = new Date(date);
    console.log(blogPostToEdit)
    console.log(userId);
    return (
        <div className='blog-detail-wrapper'>
            <div className='blog-title'>
                {title}
            </div>
            <div className='blog-detail-date'>
                <div>{parsedDate.getMonth()   1   '/'   parsedDate.getDate()   '/'   parsedDate.getFullYear()}</div>
            </div>
            <div className='blog-content'>
                {content}
            </div>
            <div className='blog-tags'>
                {tags}
            </div>
        </div>
    )
  

Контекст

 import React, { createContext, useReducer } from 'react';
import axios from 'axios';

import BlogReducer from '../reducers/BlogReducer';

const initialState = {
  blogPosts: [],
  blogPostToEdit: {},
  error: null
}

export const GlobalContext = createContext(initialState);

export const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(BlogReducer, initialState);

  async function getBlogPosts() {
    try {
      const res = await axios.get('http://localhost:4000/api/blogPost/getPosts');

      dispatch({
        type: 'GET_BLOGS',
        payload: res.data
      })
    } catch (err) {
      dispatch({
        type: 'FETCH_ERROR',
        payload: err.resposonse.data.error
      })
    }
  }

  async function getBlogWithId(id) {
    try {
      const res = await axios.get(`http://localhost:4000/api/blogPost/getPostById/${id}`);

      dispatch({
        type: 'GET_BLOG_ID',
        payload: res.data
      })
    } catch (err) {
      dispatch({
        type: 'FETCH_ERROR',
        payload: err.resposonse.data.error
      })
    }
  }

  return (
    <GlobalContext.Provider value={{
      blogPosts: state.blogPosts,
      blogPostToEdit: state.blogPostToEdit,
      auth: state.auth,
      error: state.error,
      getBlogPosts,
      getBlogWithId
    }}>
      {children}
    </GlobalContext.Provider>
  )
}

  

Редуктор

 export default (state, action) => {
  switch (action.type) {
    case 'GET_BLOGS':
      return {
        ...state,
        blogPosts: action.payload
      }
    case 'GET_BLOG_ID':
      return {
        ...state,
        blogPostToEdit: action.payload
      }
    default: return state;
  }
}
  

Вот как выглядят данные

 blogPostToEdit:{
content: "Right now I'm all stressing it out because I can't seem to know how to work with state and..."
date: "2020-01-02T01:18:04.488Z"
tags: ["RouterLink, Javascript, react, dummydumtime"]
title: "This is whole new blog for a whole new year"
userId:{
    date: "2019-08-27T23:27:42.945Z"
    email: "gloob@email.com"
    name: "gloob"
    password: "***"
    _id: "5d65bc6e4402213647f8704b"
}
_id: "5e0d44cc5ba6ddb32418c760"
}
  

То, что я пытаюсь сделать, это получить доступ к имени, но оно возвращается неопределенным, когда я пытаюсь его использовать. Это может быть повторяющийся вопрос, но, похоже, я не могу найти ответ. Спасибо