Abrufen von Anfangsdaten zum Rendern von Komponenten in React

Question

Ich entwickle eine Website in Isomorphic React. Ich hole Daten aus der Konstruktormethode. Aber Daten werden nicht angezeigt.

constructor(props) { 
    super(props); 
    /** 
    * @type {object} 
    * @property {array} tracks all tracks 
    */ 

    const data = fetchDemoData(); 

    this.state = { 
     name:data 
    }; 
    } 

Answer 1

Nach dem react docs on loading initial data via Ajax sollten Sie Anfangsdaten in der componentDidMount Methode holen.

Sie legen also den Ausgangszustand im Konstruktor fest und aktualisieren ihn in componentDidMount.

Answer 2

Sie sollten den Status nicht mit this.state Mutation ändern. Dies geht gegen das Grundprinzip der Reaktion, um den Zustand nur mit this.setState() zu ändern. Wenn Sie den Standardstatus für Ihre Komponente benötigen, sollten Sie static initialState verwenden (falls Sie class basierte Komponenten verwenden) oder getInitialState() (falls Sie verwenden).

Gemeinsame Praxis für Backend-Rendering ist auch zu vermeiden, mit Staat überhaupt. Verwenden Sie stattdessen Requisiten. Betrachten wir zwei Komponenten:

class FooContainer extends React.Component { 

    render() { 
    return (
     <Foo 
     users={this.state.users} 
     /> 
    ); 
    } 

} 

und

class Foo extends React.Component { 

    render() { 
    /* ... */ 
    } 

} 

Wie Sie vielleicht feststellen, <FooContainer /> Staat hat während <Foo /> nicht. In den meisten Fällen ist es einfach zu rendern <Foo /> aber Rendering <FooContainer /> kann Probleme verursachen (einfach ist compnentDidMount wird nie ausgeführt werden).

Also sollten Sie Requisiten von Foo mock und es rendern.