reagieren - Handhabung Versprechen ohne "ReduxPromise"

Ich versuche, ein Versprechen ohne Verwendung von "ReduxPromise" zu behandeln.reagieren - Handhabung Versprechen ohne "ReduxPromise"

return (
    <div> 
     <div>{this.props.weatherData.then(response => {return response.data.city.name})}</div> 
    </div> 
);

Aber ich bekomme diese Fehlermeldung:

bundle.js:1212 Uncaught Error: Objects are not valid as a React child (found: [object Promise]).

Wenn ich console.log(response.data.city.name), ich eine Folge Zeichenfolge bekommen.

Mit ReduxPromise, ich habe nur dies zu tun:

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

Dann ist dieses ich nur zurückgeben, die in der Komponente:

<div>{this.props.weatherData.data.city.name}</div>

Aber ich will es OHNE ReduxPromise

tun

Ohne ReduxPromise, this.props.weatherData ist ein Versprechen. Wie gehe ich damit in der Komponente um?

dies unten tun tut eine Endlosschleife:

render(){ 
    if (!this.props.weatherData) { 
     return <div></div> 
    }; 

    this.props.weatherData.then(response => { 
     this.setState({ weatherData: response.data }); 
     console.log(this.state.weatherData.city.name); 
    });

City Namen unendlich ausgegeben.

Quelle

2017-12-20 trogne

Sie versuchen, den Rückgabewert von this.props.weatherData.then (...) in der jsx zu rendern, was ein Versprechen wäre, was die Fehlermeldung Ihnen sagt. Rufen Sie stattdessen die Daten ab, legen Sie sie in den Status und rendern Sie basierend auf diesem Status.

Beispiel:

class WeatherDataComp extends React.Component { 
    state = { 
    weatherData: null 
    } 

    componentDidMount() { 
    this.props.weatherData.then(response => { 
     this.setState({ weatherData: response.data }) 
    }) 
    } 

    render() { 
    if (!this.props.weatherData) { 
     return null 
    } 
    return (
     <div>{this.state.weatherData.city.name}</div> 
    ) 
    } 

}

Quelle

2017-12-20 19:13:17 TLadd

Ich erhalte 'Uncaught Typeerror: nicht Eigenschaft lesen‚und dann‘von null' – trogne

' this.props .weatherData' existiert nicht beim Aufruf von componentDidMount – trogne

props.weatherData ist nur eine Funktion um die Wetterdaten zu holen, oder? Wenn ja, warum existiert es nicht auf mount? Wenn dies aus irgendeinem Grund nicht möglich ist und nicht möglich ist, müssen Sie eine componentWillReceiveProps-Lebenszyklusmethode einrichten, um nach prop.weatherData zu suchen. An diesem Punkt können Sie den Abruf auslösen. Etwas seltsam, dass es nicht existiert, da Sie denselben Fehler erhalten haben sollten, als Sie this.props.weatherData in render aufgerufen haben. – TLadd

Dank @TLadd, brauchte ich eine Lifecycle-Methode, nämlich componentWillReceiveProps:

componentWillReceiveProps(nextProps) { 
    if (!nextProps.weatherData) { 
     return; 
    }; 
    nextProps.weatherData.then(response => { 
      this.setState({ city: response.data.city.name }); 
    }); 
}

Dann:

render(){ 
    if (!this.props.weatherData) { 
     return <div></div> 
    }; 
    return (
     <div> 
      <div>{this.state.city}</div> 
     </div> 
    ); 
}

Und für die Endlos-Schleife, I bin hübsch es ist deswegen: setState verursacht t er Komponente neu zu machen, dann ist der .then Rückruf aufgerufen wird, so setState wieder, dann wieder machen usw.

Quelle

2017-12-20 20:18:09 trogne

reagieren - Handhabung Versprechen ohne "ReduxPromise"

Antwort

Verwandte Themen