Reactjs: Wie abrufen von Daten zu laden, um die Komponente montiert ist?
Etwas seltsames ist passiert, ich habe gelesen das Reagieren docs und Sie sprechen über die Lebensdauer und wie Sie tun können, somestuff, bevor die Komponente gerendert wird. Ich bin versucht, aber alles was ich versuche scheitert, immer die Komponente ist die render-ersten und nach dem aufrufen componenWillMount, ..didMount, etc.. und nach dem Aufruf von Funktionen, die render wieder passiert.
Brauche ich um die Daten zu laden, um zu füllen, die der Staat denn ich will nicht ursprünglichen Zustand zu null
möchte ich es mit den Daten, die seit dem ersten rendering.
Ich bin mit Flux und Alt, hier ist die
Aktion
@createActions(flux)
class GetDealersActions {
constructor () {
this.generateActions('dealerDataSuccess', 'dealerDataFail');
}
getDealers (data) {
const that = this;
that.dispatch();
axios.get(`${API_ENDPOINT}/get-dealers/get-dealers`)
.then(function success (response) {
console.log('success GetDealersActions');
that.actions.dealerDataSuccess({...response.data});
})
}
}
dann die store
@createStore(flux)
class GetDealersStore {
constructor () {
this.state = {
dealerData : null,
};
}
@bind(GetDealersActions.dealerDataSuccess)
dealerDataSuccess (data) {
this.setState({
dealerData : data,
});
}
}
und die Komponente
@connectToStores
export default class Dealers extends Component {
static propTypes = {
title : React.PropTypes.func,
}
static contextTypes = {
router : React.PropTypes.func,
}
constructor (props) {
super(props);
this.state = {
modal : false,
dealerData : this.props.dealerData,
}
}
componentWillMount () {
GetDealersActions.getDealers();
this.setState({
dealerData : this.props.dealerData.dealersData,
})
}
static getStores () {
return [ GetDealersStore ];
}
static getPropsFromStores () {
return {
...GetDealersStore.getState(),
}
}
render () {
return (<div>
<div style={Styles.mainCont}>
{!!this.props.dealerData ?
this.props.dealerData.dealersData.map((dealer) => {
return (<div>HERE I AM RENDERING WHAT I NEED</div>);
}) : <p>Loading . . .</p>
}
</div>
</div>
);
}
}
wie Sie sehen können in das Bauteil habe ich diese
constructor (props) {
super(props);
this.state = {
modal : false,
dealerData : this.props.dealerData,
}
}
componentWillMount () {
GetDealersActions.getDealers();
this.setState({
dealerData : this.props.dealerData.dealersData,
})
}
sagt mir, dass dealerData is undefined
oder can not read property of null
.
Alles was ich brauche, ist zu wissen, eine Technik, wo kann ich das abrufen der Daten vor der erstmaligen macht Auftritt. So kann ich ausgefüllt state
und start arbeiten mit diesen Daten.
- Eine Verwandte Frage: stackoverflow.com/q/30329418/1233251
- da ist mein Problem:
Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.
dass hat mich verwirrt. - in meinem code habe ich bereits, fügen Sie eine bedingte Anweisung und alles in Frage stellen und nicht arbeiten. Siehe meinen code, versuchen Sie, mir zu helfen, bitte.
- Sie haben wahrscheinlich eine Art Fehler, der verhindert, dass das Programm ordnungsgemäß ausgeführt.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Reagieren nicht garantieren, dass Staatliche Aufgaben in
componentWillMount
findet vor dem ersten machen. Als Sie nun erklärte, in den Kommentaren:Jedoch, die asynchrone Aktionen angefordert, es wird nicht sofort aktualisieren Sie Ihre Shop. Aufruf
GetDealersActions.getDealers();
wird Problem, der Shop ist aktualisiert mit neuen Inhalten, aber die Antwort wird erst später in der Ereignis-queue. Dies bedeutet, dassthis.props.dealersData
nicht ändern, während die Funktion und diesetState
versucht zu Lesen-Eigenschaft "dealersData" für eine nicht definierte Eigenschaft. Unabhängig davon, dass der angeforderte Inhalt nicht sichtbar auf der ersten Rendern.Mein Rat ist der gleiche wie der in einem ähnliche Frage. Die Verhinderung der Komponente gerendert, dass Inhalte, bis diese verfügbar ist, wie Sie getan haben, ist eine angemessene Sache zu tun, in einem Programm. Alternativ, machen einen loader, während Ihr "dealersData" noch nicht angekommen.
Für die Lösung Ihres Problems ist, entfernen Sie Sie, dass
setState
auscomponentWillMount
. Alles sollte gut funktionieren, wenn Ihre übergeordnete Komponente richtig hören für änderungen und verbreiten Sie, um die Kinder Requisiten.componentWillMount ()
genannt wird. Danach, das Programm rendert wieder.Die beste Antwort, die ich verwenden, um Daten zu empfangen vom server und zeigt Sie