獲取數據，要堅持退貨statment

Question

所以我有這樣的代碼將數據分配到車輛陣列控制檯日誌產生正確的結果：

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); 
       }); 
       } 

右後這個我有這個return語句，但車輛變量不能爲空不像控制檯登錄它產生：

 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> 
    ) 
    }) 
) 
}); 

我怎麼能有我在控制檯堅持圍繞return語句中看到的值，所以我可以將它們展示給用戶？

謝謝，編輯。

Answer 1

你需要重構你的代碼，你的方法並沒有遵循React的思維方式。這裏有很多事情要改進，但我只列出一對夫婦。

首先也是最重要的是，您需要從該循環中刪除提取，否則您將會對服務器進行如此多的調用。瀏覽器當時只能發送數量有限的請求，因此您的應用會超慢。如果可能（意思是您可以更新API），請嘗試一次獲取所有記錄，並將所需的所有ID發送到參數中。

接下來，您要保持數據處於該狀態。最初它將是一個空數組，但是當API響應時，應該用結果更新狀態。

最後，在渲染方法中，您將從狀態獲取數據並使用它來呈現列表。 隨時更新狀態/道具，渲染方法會自動爲您運行。

class YourAwesomeComponent extends PureComponent { 
    state = { 
    vehicles: [], // Keep data in the state 
    }; 

    componentDidMount() { 
    this.loadData(); // Call the API! 
    } 

    loadData() { 
    const url = `api/assetName/?vid=${vehiclesT.join(',')}&id=${id}`; 

    fetch(url, { credentials: 'include', method: 'get' }) 
     .then(body => body.text()) 
     .then((data) => { 
     this.setState({ vehicles: data }); // Set the result from API 
     });  
    } 

    render() { 
    const { vehicles } = this.state; // Get the data from the state 
    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.map(vehicle => 
       <li key={vehicle.id}>{vehicle.name}</li> 
      ) 
      } 
      </ul> 
     </div> 
     </div> 
    </li> 
) 
    } 
} 

這裏有很多需要改進的地方，但是你可以從這裏開始。我希望這只是一個學習項目，而不是你刨釋放對野生:)

PS的東西：IM假設你可以使用ES6