react-native - React Native 中的排序渲染
问题描述
我想创建一个简单的测验应用程序。
当我运行以下命令时,Quiz.tsx 中的第 77 行
<Text style={styles.text}>{question.question}</Text>
下面显示错误:
TypeError:TypeError:未定义不是对象(评估'question.question')
可能是因为在最后一个问题之后render() 比 nextQuestion() 完成得更快。
我该如何解决这个问题?
测验.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
解决方案
在这里,而不是,
const questions = this.props.navigation.getParam("questions", []);
你可以试试,
const questions = this.props.navigation.state.params.questions;
推荐阅读
- python - quickfix python 如何使用 SSLSocketInitiator?
- cypress - 如何使用 Cypress.io 将 baseUrl 作为参数发送
- typescript - 在打字稿中获取字典/对象键作为元组
- java - MediaPlayerService 销毁后传输控件不更新
- html - 标签和标签之间的CSS区别
- javascript - Eslint 的正确 YAML - 值不应超过 1 个项目 - 无多空行
- r - 频率变化不规则时间序列
- cmd - SolrJ 的 SolrConfig 覆盖
- typescript - tslint 没想到在它的琐事中有 jsx。什么是琐事?
- java - spring kafka 监听器在错误的地方查看 ContainerProperties