TypeError: _this.props.route.params is not a function... is an instance of Object)

Question

我是 React Native 的新手，我正在尝试创建一个包含 3 个类别的问答游戏。我正在使用 Expo，我的项目有两个主要文件来调用类别问题文件和输入测验本身，IndexQuiz.js 和 Quiz.js。导航中 IndexQuiz 之前的屏幕只是我进入这些类别的菜单。

IndexQuiz.js:

import React from "react";
import { ScrollView, StatusBar, TouchableOpacity, Text, Image, View, SafeAreaView} from "react-native";
import { AppStyles, DesafiosStyles } from "../AppStyles";
import questoes_arquitetura from "../questions/questoes_arquitetura";
import questoes_curiosidades from "../questions/questoes_curiosidades";
import questoes_historia from "../questions/questoes_historia";

export default ({ navigation }) => (
  <ScrollView style={{backgroundColor:"rgb(32, 53, 70)"}}>
    <StatusBar barStyle="light-content" />
    <SafeAreaView style={{alignItems: "center", flexDirection: "column"}}>

  <Text style={AppStyles.titleText}>Categorias</Text>
  <TouchableOpacity onPress={() => 
    navigation.navigate("Quiz", {
      title: "Arquitetura",
      questions: questoes_arquitetura,
      color: "#36b1f0"
    })} 
    style={DesafiosStyles.cardContainer}>
    <Image style={DesafiosStyles.cardImage} source={require("../assets/tp_madre.jpg")}/>
    <View style={DesafiosStyles.cardContent}>
      <Text style={DesafiosStyles.cardTitle}>Arquitetura</Text>
    </View>
  </TouchableOpacity>

  <TouchableOpacity onPress={() => 
    navigation.navigate("Quiz", {
      title: "Curiosidades",
      questions: questoes_curiosidades,
      color: "#36b1f0"
    })} 
    style={DesafiosStyles.cardContainer}>
    <Image style={DesafiosStyles.cardImage} source={require("../assets/tp_madre.jpg")}/>
    <View style={DesafiosStyles.cardContent}>
      <Text style={DesafiosStyles.cardTitle}>Curiosidades</Text>
    </View>
  </TouchableOpacity>

  <TouchableOpacity onPress={() => 
    navigation.navigate("Quiz", {
      title: "História",
      questions: questoes_historia,
      color: "#36b1f0"
    })} 
    style={DesafiosStyles.cardContainer}>
    <Image style={DesafiosStyles.cardImage} source={require("../assets/tp_madre.jpg")}/>
    <View style={DesafiosStyles.cardContent}>
      <Text style={DesafiosStyles.cardTitle}>História</Text>
    </View>
  </TouchableOpacity>

</SafeAreaView>

);

Quiz.js:

import React from "react";
import { View, StyleSheet, StatusBar, Text, SafeAreaView } from "react-native";
import { Button, ButtonContainer } from "../components/Button";
import { Alert } from "../components/Alert";

const styles = StyleSheet.create({ ...

export default class Quiz extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      correctCount: 0,
      totalCount: this.props.route.params("questions", []).length,
      activeQuestionIndex: 0,
      answered: false,
      answerCorrect: false
    }
}

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

        if (correct) {
          nextState.correctCount = state.correctCount + 1;
          nextState.answerCorrect = true;
        } else {
          nextState.answerCorrect = false;
        }

        return nextState;
      },
      () => {
        setTimeout(() => this.nextQuestion(), 750);
      }
    );
  };

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

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

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

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

    return (
      <View
        style={[
          styles.container,
          { backgroundColor: this.props.route.params("color") }
        ]}
      >
        <StatusBar barStyle="light-content" />
        <SafeAreaView style={styles.safearea}>
          <View>
            <Text style={styles.text}>{question.question}</Text>

            <ButtonContainer>
              {question.answers.map(answer => (
                <Button
                  key={answer.id}
                  text={answer.text}
                  onPress={() => this.answer(answer.correct)}
                />
              ))}
            </ButtonContainer>
          </View>

          <Text style={styles.text}>
            {`${this.state.correctCount}/${this.state.totalCount}`}
          </Text>
        </SafeAreaView>
        <Alert
          correct={this.state.answerCorrect}
          visible={this.state.answered}
        />
      </View>
    );
  }
}

然后，当我尝试继续 select 类别时：TypeError: _this.props.route.params is not a function. (In '_this.props.route.params("questions", [])', '_this.props.route.params' is an instance of Object)

我在这里遗漏了一些东西，但是什么？

Answer 1

试试这样访问

constructor(props) {
    super(props)
    this.state = {
      ...
      totalCount: props.route.params.questions.length,
      .....
}

TypeError: _this.props.route.params is not a function... is an instance of Object)

TypeError: _this.props.route.params is not a function... is an instance of Object)

react-native

expo

react-navigation-v5