获取数据以保留返回语句

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

在这之后我有这个返回语句，但车辆变量是空的，不像它产生的控制台日志：

      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 的思维方式。这里有很多需要改进的地方，但我只列出几个。

首先，也是最重要的，您需要从该循环中删除 fetch，否则您将对服务器进行如此多的调用。浏览器一次只能发送有限数量的请求，因此您的应用程序会非常慢。如果可能（意味着您可以更新 API），请尝试一次获取所有记录，在参数中发送您需要的所有 ID。

接下来，您希望将数据保持在状态中。最初它将是一个空数组，但当 API 响应时，您应该使用结果更新状态。

最后，在渲染方法中，您将从状态中获取数据并使用它来渲染列表。 只要 state/props 得到更新，render 方法就会自动为你运行。

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：我假设你可以使用 ES6