Ошибка типа: в props.onStartGame (selectedNumber) значение «props.onStartGame» не определено

Question

Я слежу за этим модулем на 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;

Файл приложения. 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 не является функцией. (IN 'props.onStartGame (selectedNUmber)', 'props.onStartGame' не определено)

Answer 1

Вам нужно передать экранную переменную вместо <StartGameScreen></StartGameScreen>,

, если первый подход не работает, пытаясь передать onStartGame = {startGameHandler}, как это в вашем коде <Header title="Guessie"></Header> <StartGameScreen onStartGame={startGameHandler} > </StartGameScreen>