Calling array getting error: undefined is not an object - reactjs

Question

There is some issue with my reducer. I can pull from the database array on command+S but when I do a hard refresh it cannot find the data.
And I get error: undefined is not an object (evaluating 'quizFire[0]')
I can load the array quizFire, I just can't call any of its elements. I've tried a number of options but I am not sure if I'm not storing or calling the database correctly.
import React, {useEffect} from 'react';
import { View, Text, } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import * as paidRoundActionFire from '../store/action/paidRoundAction';
const ThirdRound = props =>{
const dispatch = useDispatch();
useEffect(() => {
dispatch(paidRoundActionFire.fetchProducts());
}, [dispatch]);
const quizFire = useSelector(state => state.paidQuiz.questionsFire);
return(
<View>
<Text>
{quizFire[0].answer1}
</Text>
</View>
)
}
export default ThirdRound;
//Store Reducer
import { Dimensions } from 'react-native';
import { SET_QUESTIONS } from '../action/paidRoundAction';
var {height, width} = Dimensions.get('window');
//const incrementToMoveForward = (width+30)/20;
const initialState = {
//totalCount: questions.length,
questionsFire: [],
};
export default (state = initialState, action) => {
//state.activeQuestionIndex + 1;
switch (action.type) {
case SET_QUESTIONS: {
return {
questionsFire: action.questionsFireRecall,
}
}
default:
return {state};
}
};
//Store Action
import Questions from "../../models/questions";
export const SET_QUESTIONS = 'SET_QUESTIONS';
export const fetchProducts = () => {
return async dispatch => {
try {
//any async code you want
const response = await fetch(
'https://my-quiz-questions.firebaseio.com/questions.json',)
const resData = await response.json();
console.log("async/await based");
const loadedQuestions = [];
for (const key in resData) {
loadedQuestions.push(
new Questions(
key,
resData[key].answer1,
resData[key].answer2,
resData[key].answer3,
resData[key].correctAnswer,
resData[key].explanation,
resData[key].question
)
)
}
dispatch({ type: SET_QUESTIONS, questionsFireRecall: loadedQuestions });
}
catch (err) {
// send to custom analytics server
throw err;
}
};
};

Answer 1

At the beginning you have quizFire set as empty array []. But you want to render some item from this empty array and this is undefined. Try to render it like quizFire.length && quizFire[0].something
Why are you putting dispatch as useEffect deps? Because litter is telling you to do that or you did it in purpose?