Asynchrone Karte ES6 + Reagieren

Question

Ich möchte asynchron einen Iterator .map tun, aber ich weiß nicht, wie es richtig gemacht wird. Ich habe diese

async componentDidMount() { 
    await this.props.existingLettersActions.fetchExistingLetters();   
} 

render() { 
var example= ''; 
    var x = [ 
     { 
      id: 1, 
      name: 'asdf' 
     }, 
     { 
      id: 2, 
      name: 'asdf' 
     } 
    ] 
    if (this.props.letters) { 
     example = this.props.letters.map(function(item, i) { 
      return (
       <tr key={i} styleName="container"> 
        <td>{item.id}</td> 
        <td>{item.name}</td> 
       </tr> 
      ); 
     }); 
    } 
} 

return (
    {example} 
) 

Wenn ich die Karte über die Variable ‚x‘ machen richtig funktioniert und malt es richtig, aber wenn ich this.props.letters setzen springt er eine Fehlermeldung, this.props.letters.map ist nicht eine Funktion. Wie könnte ich das asynchron machen?

Answer 1

console.logconsole.log ist nicht sehr vertrauenswürdig, in dem Sinne, dass es Ihnen zeigen kann, props.letters hat einen Wert, aber es kann sehr gut sein, dass in dem Moment, dass Ihre render() -Methode ausgelöst wurde this.props.letters wurde noch nicht bevölkert mit Daten.

Es könnte sehr gut sein, dass this.props.letters beim ersten Rendern Ihrer Komponente undefiniert (oder ähnlich) sein wird.

Aus diesem Grund ist es ratsam, die prop Sie vor dem Rendern iterieren möchten zu überprüfen, so etwas wie:

render() { 
    if(!this.props.letters) { 
     return <div>Loading...</div> 
    } 

    return this.props.letters.map((item) => 
     <tr key={item.id} styleName="container__body__table__body"> 
      <td>{item.id}</td> 
      <td>{item.name}</td>       
     </tr> 
    ); 
}