मैंने अपने फायरबेस क्लाउडस्टोर से प्राप्त प्रश्नों को संभालने के लिए एक प्रतिक्रिया वर्ग घटक बनाया, फायरबेस 100% सही है और कक्षा घटक में इसे लागू करने से पहले ठीक काम कर रहा था

मैं डेटा लाने और उन्हें "प्रश्न" नामक राज्य में सहेजने की कोशिश कर रहा हूं, मुझे त्रुटि मिल रही है कि "प्रश्न" अभी भी शून्य है, यह जांचने के बाद भी कि फायरबेस कोड पूरी तरह से सही है

import './App.css';
import React, { Component } from "react";
import firebase from 'firebase';
const Config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  
  }
  
  
  firebase.initializeApp(Config);
 class Quiz extends Component{
  constructor() {
    super();
    this.state = {
      Questions: null,

      }
  };
  componentDidMount() {
    const db = firebase.firestore();
    const questionsRef = db.collection('questions');
    questionsRef.get().then((snapshot)=>{
    
      const data=snapshot.docs.map((doc)=>({
        id:doc.id,
        ...doc.data(),
      }));
      console.log(data)
      this.setState({ Questions:data });
    });
  }
  render() {
  return (
    <div className="container">
    <div className="row">
      <div className="col-md-8">
        <div className="card">
          <div className="card-header">
            Question
            <span className="float-right">
              Current Score
              <span className="badge badge-warning">

              </span>
            </span>
          </div>
          <div className="card-body">
            <h5 className="card-title">
              {this.state.Questions.questions}
            </h5>
            <div>
              <ul>
                {this.state.Questions.questions.options.map(option => (
                  <li key={option.A}>
                    <input
                      type="radio"
                      name="answer"
                      value={option.A}
                  
                      
                    />{" "}
                    {option.A}
                  </li>
                ))}
              </ul>
            </div>
            <div className="row">&nbsp;</div>
            <button
              className="btn btn-primary"
              
            >
              Submit Answer
            </button>
          </div>
        </div>
      </div>
      <div className="col-md-4">
        <div className="card">
          <div className="card-header">High Scores</div>
          <ul className="list-group list-group-flush">
            <li>
            <span>
                      </span>
                    </li>
               
          </ul>
        </div>
      </div>
    </div>
  </div>
  
  );
}
}
 

export default Quiz;
0
mai mohamed 27 पद 2020, 01:07

1 उत्तर

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

फायरस्टोर प्रश्न अतुल्यकालिक हैं। जब आप प्राप्त () को कॉल करते हैं, तो यह तुरंत वापस आ जाएगा, और लौटाए गए वादे से कॉलबैक कुछ समय बाद, क्वेरी पूरी होने के बाद लागू किया जाएगा। इसमें कितना समय लगेगा इसकी कोई गारंटी नहीं है।

इस बीच, आपका घटक { Questions: null } की प्रारंभिक स्थिति के साथ प्रस्तुत करना जारी रखता है। तथ्य यह है कि आपके पास पहले रेंडर के दौरान शुरू में null है, जो त्रुटि संदेश आपको बताने की कोशिश कर रहा है। setState को कॉल किए जाने के बाद घटक फिर से प्रस्तुत होगा, लेकिन आपको यह तय करने के लिए कोड जोड़ना चाहिए कि क्वेरी पूरी होने से पहले, प्रारंभिक शून्य मान मौजूद होने पर आप क्या प्रस्तुत करना चाहते हैं। बहुत से लोग स्पिनर या अन्य लोडिंग संकेतक का उपयोग करते हैं।

2
Doug Stevenson 27 पद 2020, 01:13