Der Props-Wert ist undefiniert

Question

Dies ist meine Home.js-Datei, die die übergeordnete Komponente ist

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>
 </>
      )}
</>
  );
}

Dies ist meine qizz.js-Datei, die eine Unterkomponente ist

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>
  )
}

Wenn ich versuche, den props-Wert zu verwenden, wird angezeigt, dass der Wert undefiniert ist, insbesondere console.log("value=",type), und wenn ich absende, wird in der Konsole keine Fehlermeldung angezeigt Entweder sind alle Werte in der Konsole leicht zu sehen, aber nachdem ich sie als Requisiten übergeben habe, weiß ich nicht, was passiert und warum sie den Wert beim Rendern der Quizseite nicht anzeigen console.log("value=",type) 当我提交时，控制台中也没有错误消息表单中的所有值都很容易在控制台中看到，但在将它们作为道具传递后，我不知道发生了什么以及为什么它们在呈现测验页面时不显示该值

这是 quizz{numQuestions} < /p> Hier ist quiz{numQuestions} und zeigt „Dies ist ein Quiz“ an, aber nicht {numQuestion}

Kann mir jemand einen Vorschlag machen, was ich tun soll?

Answer 1

我用您的代码生成了一个沙箱，它正在控制台中登录。

在这里玩一下：https://codesandbox .io/s/objective-marco-v23mkv?file=/src/App.js