Mehrere Fetch-Anweisungen in ComponentWillMount

Question

Zuerst verwendete ich componentWillMount(), um die articles Eigenschaft zu füllen (das funktionierte, kein Problem). Ich habe diese Werte wiederholt, um verschiedene Bilder/Texte auf bestimmten Containern/Komponenten anzuzeigen.

Das Problem, das ich jetzt habe, ist, dass ich jetzt auch componentWillMount verwenden möchte, um die background Eigenschaft mit einem einzigen Bild zu füllen. Ich denke, ich war in Ordnung mit der '' anstelle von [], aber ich bin mir nicht sicher, wie diese beiden API-Aufrufe zu machen.

Ich habe genug Forschung durchgeführt, um zu wissen, dass meine Antwort wahrscheinlich in Versprechungen liegt, aber ich konnte nicht aus den Beispielen extrapolieren, wie sie auf mein spezielles Problem angewendet werden würden. Irgendwelche Ideen?

constructor(props) { 
    super(props); 
    this.state = { 
    articles: [], 
    backgroundz: '', 
    }; 
} 


componentWillMount() { 
    fetch('http://localhost:8000/api/getArticles') 
    .then(function (response) { 
     return response.json(); 
    }) 
    .then(function (json) { 
     this.setState({ 
     articles: json, 
     }); 
    }.bind(this)); 

    fetch('http://localhost:8000/api/getBackground') 
    .then(function (response) { 
    return response.json(); 
    }) 
    .then(function (json) { 
    this.setState({ 
     backgroundz: json, 
    }); 
    }.bind(this)); 
} 

Answer 1

Sie gehen anfängliche AJAX-Anforderungen in componentDidMount ausführen zu wollen, wie pro the React documentation

Andere als die, die Syntax für diese Anfragen zu holen ist ein wenig aus. Es gibt auch keinen Grund, Requisiten in einen Konstruktor oder Super zu übergeben, wenn sie nicht im Konstruktor verwendet werden, was Sie ohnehin generell vermeiden sollten. Ich würde es wie folgt umgestalten:

constructor() { 
    super(); 
    this.state = { 
    articles: [], 
    backgroundz: '', 
    }; 
} 


componentDidMount() { 
    fetch('http://localhost:8000/api/getArticles') 
    .then(response => response.json()) 
    .then(articles => this.setState({ articles }); 

    fetch('http://localhost:8000/api/getBackground') 
    .then(response => response.json()) 
    .then(backgroundz => this.setState({ backgroundz }); 

    } 
}