मुझे यह एक समस्या है जिसे मैंने घटक से घटक में वापस ट्रेस करके पाया।

मेरे पास एक Quiz घटक है, जो एक मूल घटक है, जो मेरे Clock घटक सहित 3 बच्चों के घटकों को संग्रहीत करेगा।

सबसे पहले, मुझे लगा कि मैं अपने क्लॉक कंपोनेंट के साथ कुछ गलत कर रहा हूं, इसलिए मैंने उस कंपोनेंट के इंटरवल फंक्शन को पूरा करने के लिए उस कंपोनेंट पर दिन बिताए।

लेकिन बाद में जो मैंने नोटिस किया वह यह है कि यह हमेशा undefined को पहले प्रस्तुत करता है, जिसे मैं अभी भी Clock घटक में ठीक करने का प्रयास करता हूं, फिर मुझे याद है कि मैं time को प्रॉप्स के रूप में पास करता हूं Quiz, और मैं इसे वापस Quiz घटक में ढूंढता हूं, और यहां मैंने पाया कि हर बार Quiz घटक पहली बार प्रस्तुत करता है, इसे undefined मिलेगा और फिर दूसरा रेंडर, यह सही डेटा दिखाएगा जो मुझे चाहिए, इसलिए मेरा Clock घटक काम नहीं करता है।

तो क्या ऐसा कोई तरीका है जिससे मैं पहली बार डेटा प्रस्तुत करने के लिए Quiz घटक प्राप्त कर सकूं? क्योंकि मुझे इसे पहले Axios का उपयोग करके लाना है, फिर खाली सरणी स्थिति भरें। मैं जो चाहता हूं, उसे तुरंत घड़ी में प्रॉप्स के रूप में पास करना है ताकि मैं कुछ समय प्रारूप का उपयोग कर सकूं (लेकिन चूंकि यह पहली बार में अपरिभाषित है, यह तुरंत एक त्रुटि दिखाएगा)।

यह हमेशा पहली बार undefined रेंडर करेगा।

enter image description here

यहां मेरा कोड है, यह काफी छोटा और सरल है, कृपया मेरी मदद करें और इसके बारे में और बताएं, मैं इसे बहुत बार मिलता हूं लेकिन मुझे आमतौर पर इससे कोई फर्क नहीं पड़ता क्योंकि जब तक मैं इस स्थिति को पूरा नहीं करता तब तक बाकी सब कुछ काम कर रहा है। धन्यवाद।

import React, { useState, useEffect } from "react";
import Clock from "../Clock/clock.js";
import QuizForm from "../QuizForm/quiz-form.js";
import RankList from "../RankList/ranklist.js";
import axios from "axios";

export default function Quiz(props) {
    const [dataTopic, setDataTopic] = useState([]);
    const quizID = Number(props.match.params.topicId);

    useEffect(
        () =>
            axios.get("http://localhost:3000/quiz-topics/" + quizID).then((res) => {
                setDataTopic(res.data);
            }),
        [quizID]
    );

    return (
        <div className="row">
            <Clock time={dataTopic.quiztime} />
            <QuizForm quizID={quizID} />
            <RankList quizID={quizID} />
        </div>
    );
}
0
Bunny 6 जुलाई 2021, 07:57

3 जवाब

सबसे बढ़िया उत्तर

आप सशर्त प्रतिपादन का उपयोग कर सकते हैं।

import React, { useState, useEffect } from "react";
import Clock from "../Clock/clock.js";
import QuizForm from "../QuizForm/quiz-form.js";
import RankList from "../RankList/ranklist.js";
import axios from "axios";

export default function Quiz(props) {
    const [dataTopic, setDataTopic] = useState([]);
    const quizID = Number(props.match.params.topicId);

    useEffect(
        () =>
            axios.get("http://localhost:3000/quiz-topics/" + quizID).then((res) => {
                setDataTopic(res.data);
            }),
        [quizID]
    );

    return (
        <div className="row">
           {dataTopic.length && <Clock time={dataTopic.quiztime} />}
            <QuizForm quizID={quizID} />
            <RankList quizID={quizID} />
        </div>
    );
}
1
Hanuman Singh 6 जुलाई 2021, 05:47

आपकी डिफ़ॉल्ट प्रारंभिक स्थिति dataTopic एक खाली सरणी के रूप में सेट है और इसलिए पहला रेंडर हमेशा खाली सरणी के साथ किया जाएगा। इसलिए, जब आप क्लॉक घटक को {dataTopic.quiztime} पास करते हैं, तो यह केवल undefined देता है।

मामले में, यदि आप खाली सरणी के साथ किसी भी प्रकार का प्रतिपादन नहीं चाहते हैं, तो क्लॉक घटक में शॉर्ट सर्किट की स्थिति जोड़ें जैसे कि यह उस घटक को बिना किसी डेटा के प्रस्तुत नहीं करेगा।

{dataTopic.quizTime && <Clock time={dataTopic.quiztime} />}

1
Muthusamy 6 जुलाई 2021, 05:37

क्या आप अपना घड़ी घटक कोड साझा कर सकते हैं? इसके बाद यह और स्पष्ट होगा।

इसके अलावा, अगर मैं तुम होते, तो मैं भी एसिंक-प्रतीक्षा के साथ प्रयास करता!

0
Rajan Mishra 6 जुलाई 2021, 05:39