la valeur des accessoires n'est pas définie

Question

Voici mon fichier Home.js qui est le composant parent

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

Voici mon fichier qizz.js qui est un sous-composant

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

Lorsque j'essaie d'utiliser la valeur des accessoires, cela montre que la valeur n'est pas définie, en particulier console.log("value=",type) et lorsque je soumets, il n'y a pas de message d'erreur dans la console soit Toutes les valeurs sont faciles à voir dans la console mais après les avoir passées comme accessoires, je ne sais pas ce qui se passe et pourquoi elles n'affichent pas la valeur lors du rendu de la page du quiz console.log("value=",type) 当我提交时，控制台中也没有错误消息表单中的所有值都很容易在控制台中看到，但在将它们作为道具传递后，我不知道发生了什么以及为什么它们在呈现测验页面时不显示该值

这是 quizz{numQuestions} < /p> Voici le quiz{numQuestions} et affiche "Ceci est un quiz" mais pas {numQuestion}

Quelqu'un peut-il me suggérer quoi faire

Answer 1

J'ai généré un bac à sable avec votre code et il se connecte dans la console.

Jouez ici : https://codesandbox .io/s/objective-marco-v23mkv?file=/src/App.js