I’m trying to pass data into a component with mapstatetoprops. The problem is that the data is fetched into the reducer from the backend, but in my component, I’m getting an empty Array [] and subsequently an error of undefined
When I disconnect it from the backend and place the data inside the reducer, everything works fine, but as soon as I connect back to Redux, the data does not go beyond the Reducer (I’m working with a MERN stack)
My Reducer
const initialState = {
quizes : [ ]
loading: false
}
export default function(state=initialState,action){
switch(action.type){
case GET_QUIZ:
//The result of the
log below successfully gives
me back data fetched from the API/backend//
console.log(action.payload)
return{
...state,
quizes:action.payload,
loading:false
}
case QUIZ_LOADING:
return{
...state,
loading:true
}
default:
return state;
}
}
.................................................................
my App
class QuestionApp extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
questionId: 1,
question: '',
answerOptions: [],
answer: '',
answersCount: {
Smart: 0,
Subpar: 0,
Confused: 0
},
result: ''
};
this.handleAnswerSelected = this.handleAnswerSelected.bind(this);
}
componentDidMount() {
this.props.getQuiz();
//The result of the log beow gives me back an empty Array//
console.log(this.props.quiz.quizes)
const shuffledAnswerOptions = this.props.quiz.quizes.map((question) =>
this.shuffleArray(question.answers));
this.setState({
// the error appears on next line : Uncaught TypeError: Cannot read property 'question' of undefined
question: this.props.quiz.quizes[0].question,
answerOptions: shuffledAnswerOptions[0]
});
}
//Remaining body of code
QuestionApp.propTypes ={
getQuiz:PropTypes.func.isRequired,
quiz:PropTypes.object.isRequired
}
const mapStateToprops=(state)=>({
quiz: state.quiz
});
export default connect(mapStateToprops,
{getQuiz})(QuestionApp)
...................................................................
CombineReducer
export default combineReducers({
quiz:quizReducer,
user: userReducer
});
sample of the Data = quizes:[]
[
{
question: "What is 4 X 4 ? ",
answers: [
{ type: "Smart",content: "16" },
{
type: "Subpar",
content: "15"
},
{
type: "Confused",
content: "1"
}
]
},
.......................................................................
My Schema
const QuizSchema = new Schema({
question: {
type:String,
default:''
},
answers: [{
type: {
type: String,
default:''
},
content: {
type: String,
default:''
},
}]
});
module.exports=Quiz=mongoose.model('quizes',QuizSchema,'quiz');