ReactJS: Reagieren Komponente nicht Rendering

Question

ContactList.js

var React = require('react'); 
    var Contact = require('./contact.js'); 

    var ContactList = React.createClass({ 
     render: function() { 
      return(
       <div> 
        <h3>Contacts</h3> 
        <table className="table table-striped"> 
        <thead> 
         <tr> 
          <th>Name</th> 
          <th>Number</th> 
          <th>Email</th> 
          <th></th> 
         </tr> 
        </thead> 
         <tbody> 
           { 
           this.props.contacts.map(function(contact, index) { 
            <Contact contact={contact} key={index} /> 
           }) 
           } 
         </tbody> 
        </table> 
       </div> 
      ) 
     } 

Contact.js

var React = require('react'); 

var Contact = React.createClass({ 
    render: function() { 
     return(
     <tr> 
      <td>{this.props.contact.name}</td> 
      <td>{this.props.contact.phone}</td> 
      <td>{this.props.contact.email}</td> 
     </tr> 
    ) 
    }  
}) 

module.exports = Contact; 

Grundsätzlich kann ich die Kontakte Daten von Feuerbasis in der Konsole erhalten, aber ich will alle anzuzeigen Kontakte, die ich in der Tabelle gespeichert habe. Hinter den Kulissen gibt es ein React-Flux-Setup. Status 'Kontakte' ist im Grunde ein Objekt in einem Array, wenn ich gehe, um Werkzeuge zu reagieren, kann ich nicht Kontaktkomponente dort sehen, auch wenn ich versuche, console.log etwas zu überprüfen, nichts funktioniert in Contact-Komponente, es scheint wie Requisiten nicht übergeben Kontakt zu Komponente, auch manchmal bekomme ich [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. weiß nicht, ob es wegen dieser ist.

Kann mir jemand erklären, was falsch ist? Danke im Voraus!!.

Answer 1

Sie müssen Requisiten an ContactList.js senden, d. H. Die Antwort.data, die Sie erhalten, nachdem Sie Firebase getroffen haben. Etwas wie folgt aus: -

React.render(<ContactList contacts= 'your response object' />); 

Überprüfen Sie, ob Ihre Weitergabe oder nicht.

es zu lösen leichter Sie React.Component,

Contact.js

import React from 'react' 

class Contact extends React.Compponet{ 
{contact}=this.props; 
    render() { 
     return(
     <tr> 
      <td>{contact.name}</td> 
      <td>{contact.phone}</td> 
      <td>{contact.email}</td> 
     </tr> 
    ) 
    }  
} 

export default Contact 

Sie müssen die Requisiten passieren auf die Contact Klasse

können

ContactList.js

import React from 'react'; 
    import Contact from './contact' 

     class ContactList extends React.Component { 
     {contacts}=this.props; 
      render(){ 
       return(
        <div> 
         <h3>Contacts</h3> 
         <table className="table table-striped"> 
         <thead> 
          <tr> 
           <th>Name</th> 
           <th>Number</th> 
           <th>Email</th> 
           <th></th> 
          </tr> 
         </thead> 
          <tbody> 
            { 
            contacts.map(function(contact, index) { 
             <Contact contact={contact} key={index} /> 
            }) 
            } 
          </tbody> 
         </table> 
        </div> 
       ) 
      } 
     } 
export default ContactList 

das würde es intern an Contact übergeben.

Vielen Dank.

Answer 2

Sie benötigen die Contact Komponente innerhalb der ContactList Komponente wie folgt zurück:

this.props.contacts.map(function(contact, index) { 
     return <Contact contact={contact} key={index} /> 
    }) 

oder Sie Pfeil Funktion verwenden können:

this.props.contacts.map((contact, index) => { 
     <Contact contact={contact} key={index} /> 
    })