时间戳

首页 > 解决方案 > 调用数组得到错误：未定义不是对象

reactjs - 调用数组得到错误：未定义不是对象

问题描述

我的减速机有问题。我可以在 command+S 上从数据库数组中提取数据，但是当我进行硬刷新时，它找不到数据。

  1. 我得到错误：未定义不是一个对象（评估'quizFire [0]'）

我可以加载数组 quizFire，但我不能调用它的任何元素。我尝试了许多选项，但我不确定我是否没有正确存储或调用数据库。

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;
      }
    };
  };

标签： reactjsreduxnativeredux-thunk

解决方案

一开始您已quizFire设置为空数组[]。但是你想从这个空数组中渲染一些项目，这是未定义的。尝试渲染它quizFire.length && quizFire[0].something

你为什么把dispatch作为 useEffect 的部门？因为垃圾告诉你这样做还是你故意这样做的？

推荐阅读