测序渲染反应

Question

我想创建一个简单的问答应用程序。

当我运行以下代码时，Quiz.tsx中的第77行

<Text style={styles.text}>{question.question}</Text>

下面显示的是错误：

TypeError: TypeError:未定义不是对象(计算'question.question')

可能是因为render()比nextQuestion() 在最后一个问题之后完成得更快。

我怎么才能解决这个问题？

Quiz.tsx

import React from "react";
import { View, StyleSheet, StatusBar, Text, SafeAreaView } from "react-native";
import { StackActions, NavigationScreenProp } from 'react-navigation';

const styles = StyleSheet.create({
// some styles
});

export interface Props {
  navigation: NavigationScreenProp<any, any>;
}

export interface State {
  correctCount: number;
  totalCount: number;
  activeQuestionIndex: number;
  answered: boolean;
  answerCorrect: boolean;
}

class Quiz extends React.Component<Props, State> {

  state:State = {
    correctCount: 0,
    totalCount: this.props.navigation.getParam("questions", []).length,
    activeQuestionIndex: 0,
    answered: false,
    answerCorrect: false,
  };

  answer = (correct) => {
    this.setState(
      (state) => {
        const nextState = {
          answered: true,
          answerCorrect: true
          };

        if (correct) {
          this.state.correctCount = state.correctCount + 1;
          nextState.answerCorrect = true;
        } else {
          nextState.answerCorrect = false;
        }
          return nextState;
        },
      () => {
        setTimeout(() => this.nextQuestion(), 1000);
      }
    );
  }

  nextQuestion = () => {
    this.setState(state => {
      const nextIndex = this.state.activeQuestionIndex + 1;

      if ( nextIndex >= this.state.totalCount) {
        this.props.navigation.dispatch(StackActions.popToTop());
      } 

      return {
        activeQuestionIndex: nextIndex,
        answered: false
      };
    });
  };

  render() {
    const questions = this.props.navigation.getParam("questions", []);
    const question = questions[this.state.activeQuestionIndex];

    return (
      <View>
        <StatusBar barStyle="light-content" />
        <SafeAreaView>
          <View>
            <Text style={styles.text}>{question.question}</Text>
          </View>
        </SafeAreaView>
      </View>
    );
  }
};

export default Quiz ;

错误消息

TypeError: TypeError: undefined is not an object (evaluating 'question.question')
* App/screens/Quiz.tsx:101:48 in render
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11581:21 in finishClassComponent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11509:4 in updateClassComponent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17276:21 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:335:31 in setState
* App/screens/Quiz.tsx:73:18 in nextQuestion
* App/screens/Quiz.tsx:67:25 in <unknown>
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:152:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:414:17 in callTimers
- ... 5 more stack frames from framework internals

Answer 1

而不是这里，

const questions = this.props.navigation.getParam("questions", []);

你可以试试，

const questions = this.props.navigation.state.params.questions;