nilai prop tidak ditentukan

Question

Ini ialah fail Home.js saya yang merupakan komponen induk

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 ? (<Quiz
    numQuestions={numQuestions} category={category} difficulty={difficulty} type={type}
 />):(<>
    <div className='intials'>
        <p>
            <h1 id='tophead'>Quizz Time</h1>
            Welcome to Quize time test your knowledge on various topics including sports,science,enviorment etc.
        </p>
    </div>
 <form  method="get" onSubmit={handleSubmit} className='form'>
    <div className='quiz'>
        Number of Question: <label htmlFor='noq'></label>
        <input type="number" name="noq" id="noq" min="5" max="20" value={numQuestions} onChange={(e) => setNumQuestions(e.target.value)} className='input'>
        </input>
    </div>
    <div className='quiz'>
    Select Category: <label htmlFor='category'></label>
        <select name='category'id='category' onChange={(e) => setCategory(e.target.value)} className='input'>
            <option value={category}>General Knowledge</option>
            <option value="10">Entertainment: Books</option>
            <option value="11">Entertainment: Film</option>
            <option value="12">Entertainment: Music</option>
            <option value="13">Entertainment: Musicals &amp; Theatres</option>
            <option value="14">Entertainment: Television</option>
            <option value="15">Entertainment: Video Games</option>
            <option value="16">Entertainment: Board Games</option>
            <option value="17">Science &amp; Nature</option>
            <option value="18">Science: Computers</option>
            <option value="19">Science: Mathematics</option>
            <option value="20">Mythology</option>
            <option value="21">Sports</option>
            <option value="22">Geography</option>
            <option value="23">History</option>
            <option value="24">Politics</option>
            <option value="25">Art</option>
            <option value="26">Celebrities</option>
            <option value="27">Animals</option>
            <option value="28">Vehicles</option>
            <option value="29">Entertainment: Comics</option>
            <option value="30">Science: Gadgets</option>
            <option value="31">Entertainment: Japanese Anime &amp; Manga</option>
            <option value="32">Entertainment: Cartoon &amp; Animations</option>     
        </select>
    </div>
    <div className='quiz'>
    <label htmlFor="difficulty">Select Difficulty: </label>
    <select name="difficulty" className="input" onChange={(e) => setDifficulty(e.target.value)} id='difficulty'>
            <option value={difficulty}>Easy</option>
            <option value="medium">Medium</option>
            <option value="hard">Hard</option>
        </select>
    </div>
    <div className='quiz'>
    <label htmlFor="type">Select Type: </label>
    <select name="type" className="input" id='type' onChange={(e) => setType(e.target.value)}>>
            <option value={type}>Multiple Choice</option>
            <option value="boolean">True / False</option>
        </select>
    </div>
    <div className='quiz'>
        <button className="btn input" type="submit" >Generate Quiz</button>
        </div>
 </form>
 </>
      )}
</>
  );
}

Ini ialah fail qizz.js saya yang merupakan subkomponen

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 (
    <div>
      <p>
        this is quizz{numQuestions}
      </p>
    </div>
  )
}

Apabila saya cuba menggunakan nilai prop, ia menunjukkan bahawa nilai itu tidak ditentukan, khususnya console.log("value=",type) dan apabila saya menyerahkan, tiada mesej ralat dalam konsol sama ada Semua nilai mudah dilihat dalam konsol tetapi selepas memberikannya sebagai prop, saya tidak tahu apa yang berlaku dan mengapa nilai itu tidak menunjukkan nilai semasa memaparkan halaman kuiz console.log("value=",type) 当我提交时，控制台中也没有错误消息表单中的所有值都很容易在控制台中看到，但在将它们作为道具传递后，我不知道发生了什么以及为什么它们在呈现测验页面时不显示该值

这是 quizz{numQuestions} < /p> Berikut ialah kuiz{numQuestions} dan memaparkan "Ini ialah kuiz" tetapi bukan {numQuestion}

Boleh sesiapa cadangkan saya apa yang perlu dilakukan

Answer 1

Saya menjana kotak pasir dengan kod anda dan ia sedang log masuk ke konsol.

Main di sini: https://codesandbox .io/s/objective-marco-v23mkv?file=/src/App.js