setState mit Versprechen

Question

Ich versuche, Versprechen zu verwenden, um eine Reaktionskomponente zu füllen. Ich habe debugged und die Anweisung this.setState({items: items}) innerhalb componentWillMount() wird nach render() aufgerufen, so dass immer das Elementarray in der Renderfunktion leer ist. Auch ich habe versucht, componentDidMount() zu verwenden.

Welches wäre der richtige Ansatz?

interface Props extends React.Props<ItemsListComponent> { 
    isAddButtonClicked : boolean; 
    newItem : string; 
    } 

    interface State { 
     items : Array<ItemEntity>; 
    } 

    export class ItemsListComponent extends React.Component<Props, State> { 

    constructor(props: Props) { 
     super(props); 
     this.state = {items: []}; 
    } 

    public componentWillMount() { 
     itemAPI.getAllItems().then((items) => { 
      this.setState({items: items}) 
     }); 
    } 

    render() { 
    return(
     <div className="container"> 
     <div className="row"> 
      <ul className="list-group"> 
      {this.state.items.map((item : ItemEntity) => 
       // Each child in an array or iterator should have a unique "key" prop. React doc. 
       <li className="list-group-item" key={item.id}>{item.task}</li> 
      )} 
      </ul> 
     </div> 
     </div> 
    ); 
    } 
    } 

Answer 1

Das Problem ist, dass die Daten noch nicht verfügbar sind, wenn React die Komponente rendert. In der Praxis sollte den Code Schutz gegen diese entweder auf der Komponente oder oben:

render() { 
    if(!this.state.items) return null; // or loading indicator, data has not returned yet 
    return (<div className="container"> 
     ... 
    </div>); 
} 

Answer 2

Ich würde die itemAPI.getAllItems() im Konstruktor der Komponente setzen. Sobald die Artikel ankommen, egal wann, wird der Status aktualisiert und dies löst render() aus.

Answer 3

create-Methode 'asyncUpdate (data) {this.setState (Daten)}' in Konstruktor gesetzt 'this.asyncUpdate = this.asyncUpdate.bind (this)'

Und nach dem Versprechen Rufauslösers ' this.asyncUpdate (promisedData)‘

sollte

Answer 4

Aus der Dokumentation helfen: componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state synchronously in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method. Sie sollten in der Lage Ihre Anfrage in componentDidMount() zu machen. Dies sorgt für einen neuen Renderer, wenn sich der Status ändert. Wenn es noch leer ist, besteht die Möglichkeit, dass Ihre Map in Ihrem Rendering ein leeres Array zurückgibt. Stellen Sie sicher, dass Sie das von Ihrer API zurückgegebene Objekt ordnungsgemäß formatieren. Es gibt eine Chance, die Antwort ist das Formular { items: [] }.

Answer 5

Nach dem React Documentation Aufruf APIs am besten in componentDidMount getan wird().

Das in Kombination mit der Antwort von Benjamin wird Ihnen die beste Implementierung geben.