这是我的 Home.js 文件，它是父组件

import React from 'react'
import "./Home.css"
import  { useState } from 'react'
import Quiz from './Quiz';
import {useNavigate} from 'react-router-dom';
export default function Home() {
    const [numQuestions, setNumQuestions] = useState(10);
    const [category, setCategory] = useState(9);
    const [difficulty, setDifficulty] = useState('easy');
    const [type, setType] = useState('multiple');
    const navigate= useNavigate();
    const [submitted, setSubmitted] = useState(false);
    const handleSubmit = (e) => {
        setSubmitted(true);
        console.log(numQuestions);
        console.log(category);
        console.log(difficulty);
        console.log(type);
        e.preventDefault();
       navigate('/quizz');
      };
  return (
    <>
     {submitted ? ():(<>
    

        

            
Quizz Time
            Welcome to Quize time test your knowledge on various topics including sports,science,enviorment etc.
        

    
 

    

        Number of Question: 
         setNumQuestions(e.target.value)} className='input'>
        
    
    

    Select Category: 
         setCategory(e.target.value)} className='input'>
            General Knowledge
            Entertainment: Books
            Entertainment: Film
            Entertainment: Music
            Entertainment: Musicals & Theatres
            Entertainment: Television
            Entertainment: Video Games
            Entertainment: Board Games
            Science & Nature
            Science: Computers
            Science: Mathematics
            Mythology
            Sports
            Geography
            History
            Politics
            Art
            Celebrities
            Animals
            Vehicles
            Entertainment: Comics
            Science: Gadgets
            Entertainment: Japanese Anime & Manga
            Entertainment: Cartoon & Animations     
        
    
    

    Select Difficulty: 
     setDifficulty(e.target.value)} id='difficulty'>
            Easy
            Medium
            Hard
        
    
    

    Select Type: 
     setType(e.target.value)}>>
            Multiple Choice
            True / False
        
    
    

        Generate Quiz
        
 
 
      )}

  );
}

这是我的 qizz.js 文件，它是子组件

import React, { useEffect } from 'react'
export default function Quiz(props) {
  const { numQuestions, category, difficulty, type } = props;
  useEffect(() => {
    fetch(`https://opentdb.com/api.php?amount=10`)
    .then((res) => {
      console.log("value=",numQuestions)
      console.log("value=",category)
      console.log("value=",difficulty)
      console.log("value=",type)
      console.log(res);
      return res.json();
    })
    .then((json) => {
      console.log(json);
      // Process the data here
    });
}, []);
  return (
    

      

        this is quizz{numQuestions}
      
    
  )
}

当我尝试使用 props 值时，它显示该值未定义，特别是 console.log("value=",type) 当我提交时，控制台中也没有错误消息表单中的所有值都很容易在控制台中看到，但在将它们作为道具传递后，我不知道发生了什么以及为什么它们在呈现测验页面时不显示该值

这是 quizz{numQuestions} < /p> 并显示“这是测验”，但不显示 {numQuestion}

任何人都可以建议我做什么