Map Objekte und machen einen API-Aufruf

Question

ich ein Objekt, das so etwas wie diese

messageData = { items: [{name:'1st msg' draft:{contact: endpoint}}, 
         {name:'1st msg' draft:{contact: endpoint}}, 
         {name:'1st msg' draft:{contact: endpoint}]} 

ich über die Elemente abbilden müssen aussieht und einen API-Aufruf zu tun, dass die Daten aus dem api Endpunkt erweitert und bringe sie in eine Tabellenzeile

renderMessageTableRow() { 
     let dataRef = this.state.messageData.items, 
      return(_.map(dataRef, (message) => { 
       // Get vars from message data including contact method endpoint 
       let id = message['@id'], 
        status = message.status, 
        draftData = message.draft.recipientAddress 

        return (
         <tr> 
          <td>{id}</td> 
          <td>{status}</td> 
         </tr> 

       ) 
      }) 
     ) 

} 

bisher sieht meine Funktion wie diese aber draftData ist ein Endpunkt ich muss meine Tabellenzeile mit erweitern und zu füllen, ich reagieren und Redux verwenden. Ich habe Bibliotheken wie async und co gesucht, bin mir aber nicht sicher, wie ich das in meine Kartenfunktion einbauen würde. Ich muss nur den Endpunkt aufrufen, um einige Variablen aus diesen Daten zu machen und den Rest meiner Tabelle damit zu füllen. Jede Hilfe würde sehr geschätzt werden

Answer 1

Es gibt eine Reihe von Möglichkeiten, wie Sie Daten erhalten und für das Rendern speichern können (zum Beispiel Redux). Hier ist ein einfaches Beispiel, das nur den Status der Komponente verwendet und den Ajax componentDidMount aufruft. Wahrscheinlich würden Sie so etwas aus der Komponente herausholen, aber das sollte Ihnen ein Gefühl für den Fluss geben. Es verwendet isomorphes Fetch, das Sie mit NPM erhalten können.

import React from 'react'; 

require('es6-promise').polyfill(); 
require('isomorphic-fetch'); 

const messageData = { 
    items: [ 
     { name: '1st msg', draft: { contact: 'http://something.something/api' } }, 
     { name: '1st msg', draft: { contact: 'http://something.something/api' } }, 
     { name: '1st msg', draft: { contact: 'http://something.something/api' } }, 
    ], 
}; 

class MyComponent extends React.Component { 
    constructor() { 
     super(); 

     this.state = { rows: undefined }; 
    } 

    componentDidMount() { 
     // make an array of promises that are your api calls 
     const promises = messageData.items.map((item, i) => fetch(item.draft.contact).then(data => { 
      messageData.items[i].draft.data = data; 
      return data; 
     })); 

     // resolve all the api calls in parallel and populate the messageData object as they resolve 
     Promise.all(promises).then(responses => { 
      // messageData.items are populated now, but if you want to do anything additional, the data from the ajax calls is all here 
      console.log(responses); 

      // set the populated items in state 
      this.setState({ rows: messageData.items }); 
     }); 
    } 

    render() { 
     // conditionally populate the rows constant 
     const rows = (this.state.rows) ? this.state.rows.map(row => (
      <tr> 
       <td>{row.draft.data.somePropFromApi}</td> 
      </tr> 
     )) : null; 

     return (
      <table> 
       {rows} 
      </table> 
     ); 
    } 
} 

export default MyComponent;