类型错误：在 props.onStartGame(selectedNumber) 中，'props.onStartGame'未定义

Question

我正在关注Alex Macmillian的Udemy COurse上的这个模块

在第65模块中，我收到了以下错误：

错误屏幕截图

import React, { useState } from "react";
import {
View,
StyleSheet,
Text,
TouchableWithoutFeedback,
Keyboard,
Dimensions,
Alert,
TouchableOpacity,
} from "react-native";
import Card from '../components/Card'
import Colors from '../constants/Colors'
import Input from '../components/Input'
import CircleShape from '../components/CircleShape'
import HeartShape from '../components/HeartShape'
import CrossShape from '../components/CrossShape'
const StartGameScreen = props => {
const [enteredValue, setEnteredValue] = useState('')
const [selectedNumber, setSelectedNumber] = useState()
const [confirmed, setConfirmed] = useState(false);
//validates the non valid inputs in the inputText
const changeTextHandler = inputText => {
//replaces any character other than 0-9 with a blank
setEnteredValue(inputText.replace(/[^0-9]/g, ''))
}
const resetInputHandler = () => {
setEnteredValue('');
Keyboard.dismiss()
setConfirmed(false)
}
const confirmInputHandler = () => {
const chosenNumber = parseInt(enteredValue);
if (isNaN(chosenNumber) || chosenNumber <= 0 || chosenNumber > 99) {
Alert.alert('Invalid String!', "Enter a number between 0 and 99",
[{ text: "Okay", style: "default", onPress: resetInputHandler },
{ text: 'Cancel', style: 'destructive', onPress: resetInputHandler }])
return;
}
setConfirmed(true);
setSelectedNumber(chosenNumber)
setEnteredValue('')
Keyboard.dismiss()
}
let confirmedOutput;
if (confirmed) {
// confirmedOutput = <Text> You Chose : {selectedNumber} </Text>
confirmedOutput = (
<Card style={styles.circleShapeView}>
<Text style={styles.selectedNumber}>{selectedNumber}</Text>
<TouchableOpacity
activeOpacity={0.26}
style={styles.TriangleShapeView}
onPress={() => props.onStartGame(selectedNumber)}>
</TouchableOpacity>
</Card>
)
}
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss()
}}>
<View style={styles.screen}>
<Card style={styles.gameArea}>
<Input
style={styles.textInput}
keyboardType="numeric"
maxLength={2}
onChangeText={changeTextHandler}
value={enteredValue}
placeholder='0'
placeholderTextColor="#000" />
{/* <View style={styles.buttonContainer}>
<View style={styles.button}>
<Button
onPress={resetInputHandler}
title="Reset"
color="#fff" />
</View>
<View style={styles.button}>
<Button
title="Confirm"
color="#fff"
onPress={confirmInputHandler} />
</View>
</View> */}
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.heartButton} onPress={resetInputHandler}>
<CircleShape style={styles.circle}>
<HeartShape style={styles.heart}>
</HeartShape>
</CircleShape>
</TouchableOpacity>
<TouchableOpacity style={styles.crossButton} onPress={confirmInputHandler}>
<CircleShape style={styles.circle}>
<CrossShape style={styles.cross}></CrossShape>
</CircleShape>
</TouchableOpacity>
</View>
</Card>
{confirmedOutput}
</View>
</TouchableWithoutFeedback>
);
}
export default StartGameScreen;

App.js文件-->

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import Header from './components/Header'
import StartGameScreen from './screens/StartGameScreen'
import GameScreen from './screens/GameScreen';
export default function App() {
const [userNumber, setUserNumber] = useState();
const startGameHandler = selectedNumber => {
setUserNumber(selectedNumber);
}
let screen = <StartGameScreen onStartGame={startGameHandler} />;
if (userNumber) {
screen = <GameScreen userChoice={userNumber}/>
}
return (
<View style={styles.screen}>
<Header title="Guessie"></Header>
<StartGameScreen></StartGameScreen>
</View>
);


}
const styles = StyleSheet.create({
screen: {
flex:1
},
});

如何修复此错误？

类型错误：props.onStartGame不是函数。(在"props.onStartGame(selectedNUmber("中，"props.on StartGame"未定义(

Answer 1

您需要传递屏幕变量，而不是<StartGameScreen></StartGameScreen>、

如果第一种方法不起作用，请尝试在代码<Header title="Guessie"></Header> <StartGameScreen onStartGame={startGameHandler} > </StartGameScreen>中像这样传递onStartGame={startGameHandler}

Answer 2

if (isNaN(chosenNumber) || chosenNumber <= 0 || chosenNumber > 99) {
Alert.alert(
'Invalid number!',
'Number has to be a number between 1 and 99.',
[{ text: 'Okay', style: 'destructive', onPress: resetInputHandaler }]
);