Seltsame Verhalten/Belastungsmuster, wenn Reagieren mit + Meteor Vorbefüllung bilden

Question

Cliffs:

Ich versuche, Formulare vorab ausfüllen aus einem früheren Einträgen des Benutzers, die alle in einem MongoDB colelction gespeichert ich dies tun kann konventionelle Javascript:

componentDidMount(){ 
let name = document.getElementById("name"); 
    name.value = this.props.iData.name; 
} 

Dies funktioniert gut, wenn ich die Seite aktualisieren, in dem Fall, dass ich einen Fehler, dass this.props.iData ist nicht definiert. Also, wann immer ich die Seite mit den vorgefüllten Daten besuche, funktioniert es gut und das Abonnement funktioniert gut. Aber wenn ich dieselbe Seite aktualisiere, wird das Abonnement nicht schnell genug geladen.

Das Abonnement wird wie folgt durchgeführt:

export default createContainer(function(){ 
    const subHandle = Meteor.subscribe("iData", function(){ 
    }); 
    const isLoading = !subHandle.ready(); 
    return { 
    isLoading, 
    iData: Poll.find().fetch(), 
    } 
}, UserSettings) 

ich etwas tun muss falsch, dies den Weg zu passieren, dass es passiert.

Answer 1

Haben Sie sichergestellt, dass Ihre Daten bereit sind, wenn componentDidMount aufgerufen wird. Und auch sollten Sie nicht document.getElementById() in reagieren.

In Reaktion müssen Sie Refs verwenden.

class Sample extends React.Component { 
 
    componentDidMount() { 
 
    this.ref.input.value = 'some value'; 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <input ref="input" /> 
 
    ); 
 
    } 
 
}

Sie können dies auch tun:

class Sample extends React.Component { 
 
    render() { 
 
     return (
 
      <div> 
 
      {!this.props.isLoading ? (
 
      <input value = {this.props.someValue}/> 
 
      ) : (
 
       <p>Loading </p> 
 
      )} 
 
      </div> 
 
     ); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>