last day (14 days later) » 

2:29 PM
0
Q: React (Getting object's value) - Cannot read property of undefined

danjonescidtrixSo below is the object returned from my react Redux on my component render. Here is my component: import React from "react"; import {connect} from "react-redux" import {fetchArticle} from "../../actions/articleActions" var classNames = require('classnames'); import GlobalHero from '../modules...

 
the first one is declared in my store, and the second one is the data itself, I'm not sure why this would cause me a problem, like I said, I can return the other data fine... its only when i go deeper into the object I get the errors. @MuratK.
 
If you log this.props.article in your render method, inside the block scope that returns your headers, what would show up? It seems that you have a nested article object in there.
 
when I log this.props.article there it returns Array[0]length: 0__proto__: Array[0] @nainy
 
Well, there's your problem. You have an empty array in your article field instead of an object.
 
Ahh okay, so how come it returns the data with no problem when I don't call the section1.text? thats the bit I dont udnersatand @nainy
 
2:29 PM
Do I understand it right that if you log this.props.article.body in the same place, you get data that you expect? You might be assigning fields to an Array, it seems to me, which is, in most cases, a no-no.
 
that returns "undefined" @nainy
Hi
 
Hi
 
So im not sure why it lets me get my article.title and article.subTitle if this is the case...
 
Does it actually print out anything from these fields, though?
 
If it was a problem with how I am rendering or returning my data, surely it wouldnt work for any of it, not just the nested objects
yes it does
my page returns:
EntertheBadJah

Lorem ipsum dolor
as headers
 
2:32 PM
So, essentially, you don't have a body field on the object which is located at props.article
since it's undefined, referring to a field throws an error
since undefined is not an object
more so, it seems that you have an Array at props.article, and you probable want to have an actual object there
you have a [], while you probably need a {}
 
ahhhhh okay
I'm using this in my article reducer:
so I'll try it as an object now
 
check where you assign a body property to your article, it's probably not being set
are you getting data from a server?
 
yes its being returned from my mongoLab
this is my article in the MLab
{
"_id": {
"$oid": "58c2a5bdf36d281631b3714a"
},
"title": "EntertheBadJah",
"subTitle": "Lorem ipsum dolor",
"thmbNailImg": "",
"headerImg": "",
"body": {
"section1": {
"include": true,
"text": "Lorem ipsum dolor sit amet, dico posse integre cum ut, praesent iudicabit tincidunt te sea, ea populo semper laoreet duo."
},
"section2": {
"include": true,
"text": "Lorem ipsum dolor sit amet, dico posse integre cum ut, praesent iudicabit tincidunt te sea, ea populo semper laoreet duo."
},
"bodyImg": {
 
can you show the reducer code?
ok good, I see the data structure
 
Heres my reducer:
export default function reducer(state = {
articleList: [],
fetching: false,
fetched: false,
error: null,
}, action) {

switch (action.type) {
case "FETCH_ARTICLELIST":
{
return {
...state,
fetching: true
}
}
case "FETCH_ARTICLELIST_REJECTED":
{
return {
...state,
fetching: false,
error: action.payload
}
}
case "FETCH_ARTICLELIST_FULFILLED":
{
return {
...state,
fetching: false,
fetched: true,
articleList: action.payload,
}
}
}
return state
}
 
2:38 PM
so, and where is the article property? I see articleList
 
whoops
sorry I pasted the wrong reducer
 
post the actual one? :)
 
export default function reducer(state = {
article: [],
fetching: false,
fetched: false,
error: null,
}, action) {

switch (action.type) {
case "FETCH_ARTICLE":
{
return {
...state,
fetching: true
}
}
case "FETCH_ARTICLE_REJECTED":
{
return {
...state,
fetching: false,
error: action.payload
}
}
case "FETCH_ARTICLE_FULFILLED":
{
return {
...state,
fetching: false,
fetched: true,
article: action.payload,
}
}
}
return state
}
thats the article reducer ^
 
ok, good, can you print out the 'action.payload' ? and also maybe post the code from where this action.payload comes from
 
2:56 PM
?
 
3:17 PM
Hey
so sorry man, I'm doing this from work so i have to keep jumping on and off my project
here my article action:
import axios from "axios";
//var resourceUrl = "http://localhost:7777/api/schools";

export function fetchArticle(id) {

return function(dispatch) {
dispatch({
type: "FETCH_ARTICLE"
})
axios.get('/api/article', {
params: {
id: id
}
})
.then((response) => {
dispatch({
type: "FETCH_ARTICLE_FULFILLED",
payload: response.data
})
})
.catch((err) => {
dispatch({
type: "FETCH_ARTICLE_REJECTED",
payload: err
})
})
}
}
and finally, the code that gets my article on the server:
//GET ARTICLE
app.get('/api/article', (req, res) => {

var ObjectId = require('mongodb').ObjectID;
var ObjectID = require('mongodb').ObjectID;
var articles;

db.collection('articles')
.findOne({
"_id": ObjectId("58c2a5bdf36d281631b3714a")
})
.then(result => {
articles = result;
}).then(() => {
res.send(articles);
}).catch(e => {
console.error(e);
});

});
 

last day (14 days later) »