Erste Daten für die Rückkehr statment bleiben, um

Question

So habe ich diesen Code Daten an die Fahrzeuge Array zuweisen und das Konsolenprotokoll das richtige Ergebnis produziert:

circleAlerts = circleAlerts.map(function(assetf,index){ 
      return(
      assetf.map(function(asset, index){ 
       var vehiclesT = asset.assetIDs; 
       if(!asset.assetIDs){ 
       vehiclesT = []; 
       } 
       var y; 
       var vehicles = [] 
       for(y=0; y< vehiclesT.length; y++){ 
       var url = 'api/assetName/?vid='+vehiclesT[y]+'&id='+id; 
       fetch(url, {credentials: 'include', method: 'get'}).then(function(body){ 
        return body.text(); 
       }).then(function(data) { 
        vehicles.push(data); 
        if(y == vehiclesT.length - 1){ 
        vehicles = vehicles.map(function(vehiclef, index){ 
         return(
         <li key={index}>{vehiclef}</li> 
        ) 
        }); 
        } 
        console.log(vehicles); 
       }); 
       } 

Gleich nach dieser ich diese return-Anweisung, aber die Fahrzeuge Variable ist leer im Gegensatz zu der Konsole anmelden es produziert:

 var ind = index; 
     var indHash = "#" + ind; 
     var indExtra = ind + "ex"; 
     maps.push(indExtra); 
     return(
     <li key={ind}> 
      <button type="button" className="btn btn-info alarmListButton" data-toggle="collapse" data-target={indHash}>{asset.name}</button> 
      <div id={ind} className="collapse alarmHolder"> 
      <Map ref={indExtra} style={mapStyles} center={asset.point.coordinates} zoom={7}> 
      <TileLayer 
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
      /> 
      </Map> 
      <div className="alertListAssets"><ul>{vehicles}</ul></div> 
      </div> 
     </li> 
    ) 
    }) 
) 
}); 

Wie kann ich die Werte habe ich in der Konsole-Stick um für die Rückkehr-Anweisung, so kann ich sie dem Benutzer zeigen?

Danke, Ed.

Answer 1

Sie müssen Ihren Code umgestalten, Ihr Ansatz folgt nicht der reaktiven Art zu denken. Hier gibt es viele Dinge zu verbessern, aber ich werde nur ein paar aufzählen.

Zuerst und am wichtigsten, müssen Sie den Abruf von dieser Schleife entfernen, sonst werden Sie so viele Aufrufe an den Server vornehmen. Der Browser kann nur eine begrenzte Anzahl von Anfragen zu der Zeit senden, daher wird Ihre App sehr langsam sein. Wenn möglich (dh Sie können die API aktualisieren), versuchen Sie, alle Datensätze auf einmal zu erhalten, senden Sie alle benötigten IDs in den Parametern.

Als nächstes möchten Sie die Daten in diesem Zustand behalten. Anfangs wird es ein leeres Array sein, aber wenn die API antwortet, sollten Sie den Status mit dem Ergebnis aktualisieren.

Schließlich, in der Render-Methode erhalten Sie die Daten aus dem Zustand und verwenden Sie es, um die Liste zu rendern. Immer wenn der Status/die Props aktualisiert werden, wird die Rendermethode automatisch für Sie ausgeführt.

Es gibt soooo viele Dinge zu verbessern, aber Sie können damit beginnen. Ich hoffe, dass dies nur ein Lernprojekt und nicht etwas, das Sie auf der Wildnis zu entlassen planen :)

PS: Im vorausgesetzt, Sie können ES6 verwenden