reactjs - 尝试访问嵌套对象时,useContext 返回未定义
问题描述
我正在使用钩子来访问数据,如果我 console.log 第一级数据,我会得到所有内容,包括嵌套在初始对象中的对象。如果我尝试访问任何数据,则返回未定义。
组件访问数据
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"
}
我想要做的是访问该名称,但是当我尝试使用它时它返回未定义。这可能是一个重复的问题,但我似乎找不到答案。谢谢
解决方案
推荐阅读
- ruby-on-rails - 如何通过范围界定修复 Rails 6 弃用警告?
- javascript - 如何将多个子元素附加到父元素Javascript
- python - Chrome 将字段识别为自动填充的“地址”错误
- python-3.x - 交换单词或字符串中的第一个和最后一个字符
- python - 用于匹配以 [ 开头并以 ] 结尾的行的正则表达式
- python - 在 python 中对表进行透视后将多索引转换回列
- python-3.x - 如何将作为列表的 dict 值转换为元组,然后反转 dict
- mysql - 如何实现其他用户关系引用的Django用户?
- lua - 为模拟器创建画布时遇到问题
- android - webview变黑,应用程序崩溃