I seem to have ran into a wall and have been spinning in circles for a while trying to figure this out.
I am developing a React app, and am using Redux to manage state, which are both paired with a RoR back end. I’m able to fetch/update the Redux store/re-render components after making a local API call… but when it comes time to make an external API call via fetch(), I’m able to successfully see the state change via the Redux DevTool extension in Chrome… but cannot figure out how to map over the returned array. When I do attempt to map over the array and return each item, I get: Uncaught TypeError: Cannot read property ‘map’ of undefined
I’m running into this error when trying to render props within DisplayInterestsNewsItems.js
I’m open to any feedback/suggestions - I feel as though this is (hopefully) something simple that I’ve overlooked.
Here’s a run down of my code:
//ShowEmployeeDetails.js
import React, {useEffect} from 'react'
import {useSelector, useDispatch} from 'react-redux'
import {fetchSingleEmployee} from '../actions/employeesActions'
import {fetchEmployeeInterests} from '../actions/interestsActions'
import {fetchEmployeeInterestsNews} from '../actions/interestsActions'
import {EmployeeDetails} from './EmployeeDetails'
import {EmployeeInterest} from '../interests/EmployeeInterest'
import {DisplayInterestsNewsItems} from '../interests/DisplayInterestsNewsItems'
const ShowEmployeeDetails = (props) => {
const dispatch = useDispatch()
const employee_details = useSelector(state => state.employees.employee_details)
const employee_loading = useSelector(state => state.employees.loading)
const employee_hasErrors = useSelector(state => state.employees.hasErrors)
const interests = useSelector(state => state.interests.interests)
const interests_loading = useSelector(state => state.interests.loading)
const interests_hasErrors = useSelector(state => state.interests.hasErrors)
const interests_news = useSelector(state => state.interests.interests_news.articles)
const interests_news_loading = useSelector(state => state.interests.interests_news_loading)
const interests_news_hasErrors = useSelector(state => state.interests.interests_news_hasErrors)
useEffect(() => {
dispatch(fetchSingleEmployee(props.id))
dispatch(fetchEmployeeInterests(props.id))
dispatch(fetchEmployeeInterestsNews(props.id))
}, [])
const renderEmployeeDetails = () => {
if (employee_loading) return <p>Loading employee details...</p>
if (employee_hasErrors) return <p>Something went wrong loading the employee details... please try again...</p>
return <EmployeeDetails employee_details={employee_details} />
}
const renderEmployeeInterests = () => {
if (interests_loading) return <p>Loading employee's interests...</p>
if (interests_hasErrors) return <p>Something went wrong loading the employee's interests... please try again...</p>
return interests.map( interest => <EmployeeInterest interest={interest} key={interest.id} />)
}
const renderEmployeeInterestsNewsItems = () => {
if (interests_news_loading) return <p>Loading interest news...</p>
if (interests_news_hasErrors) return <p>Something went wrong loading the news... please try again...</p>
return <DisplayInterestsNewsItems interests_news={interests_news} />
return interests_news.articles.map(news => <DisplayInterestsNewsItems news={news} />)
}
return (
<section>
<div>
{renderEmployeeDetails()}
{renderEmployeeInterests()}
{renderEmployeeInterestsNewsItems()}
</div>
</section>
)
}
export default ShowEmployeeDetails
//DisplayInterestsNewsItems.js
export const DisplayInterestsNewsItems = ({interests_news}) => (
<div>
{console.log(interests_news)}
//IF COMMENTED OUT, CONSOLE.LOG ABOVE WILL RETURN AN ARRAY TO THE CONSOLE
{interests_news.map((article) => (
article.title
))}
</div>
)
//interestActions.js
export const GET_INTERESTS = 'GET_INTERESTS'
export const GET_INTERESTS_SUCCESS = 'GET_INTERESTS_SUCCESS'
export const GET_INTERESTS_FAILURE = 'GET_INTERESTS_FAILURE'
export const GET_EMPLOYEES_INTERESTS_NEWS = 'GET_EMPLOYEES_INTERESTS_NEWS'
export const GET_EMPLOYEES_INTERESTS_NEWS_SUCCESS = 'GET_EMPLOYEES_INTERESTS_NEWS_SUCCESS'
export const GET_EMPLOYEES_INTERESTS_NEWS_FAILURE = 'GET_EMPLOYEES_INTERESTS_NEWS_FAILURE'
export const getInterests = () => ({
type: GET_INTERESTS,
})
export const getInterestsSuccess = (interests) => ({
type: GET_INTERESTS_SUCCESS,
payload: interests,
})
export const getInterestsFailure = () => ({
type: GET_INTERESTS_FAILURE,
})
export const getEmployeesInterestsNews = () => ({
type: GET_EMPLOYEES_INTERESTS_NEWS,
})
export const getEmployeesInterestsNewsSuccess = (interest_news) => ({
type: GET_EMPLOYEES_INTERESTS_NEWS_SUCCESS,
payload: interest_news,
})
export const getEmployeesInterestsNewsFailure = () => ({
type: GET_EMPLOYEES_INTERESTS_NEWS_FAILURE,
})
export function fetchEmployeeInterests(id) {
return async dispatch => {
dispatch(getInterests())
try {
const response = await fetch('/v1/employees/' + id + '/interests')
const data = await response.json()
dispatch(getInterestsSuccess(data))
} catch (error) {
dispatch(getInterestsFailure())
}
}
}
export function fetchEmployeeInterestsNews(id) {
return async dispatch => {
dispatch(getEmployeesInterestsNews())
try {
const response = await fetch('/v1/employees/' + id + '/interests/newsfeed')
const data = await response.json()
dispatch(getEmployeesInterestsNewsSuccess(data))
} catch (error) {
dispatch(getEmployeesInterestsNewsFailure())
}
}
}
//interestsReducer.js
import * as actions from '../actions/interestsActions'
export const initialState = {
interests: [],
loading: false,
hasErrors: false,
interests_news: {},
interests_news_loading: false,
interests_news_hasErrors: false
}
export default function interestReducer(state = initialState, action) {
switch (action.type) {
case actions.GET_INTERESTS:
return { ...state, loading: true }
case actions.GET_INTERESTS_SUCCESS:
return { ...state, interests: action.payload, loading: false, hasErrors: false}
case actions.GET_INTERESTS_FAILURE:
return { ...state, loading: false, hasErrors: true}
case actions.GET_EMPLOYEES_INTERESTS_NEWS:
return{ ...state, interests_news_loading: true, interests_news_hasErrors: false}
case actions.GET_EMPLOYEES_INTERESTS_NEWS_SUCCESS:
return{...state, interests_news: action.payload, interests_news_loading: false, interests_news_hasErrors: false}
case actions.GET_EMPLOYEES_INTERESTS_NEWS_FAILURE:
return{...state, interests_news_loading: false, interests_news_hasErrors: true}
default:
return state
}
}