Question

所以我有这个代码将数据分配给vehicles数组，控制台日志产生正确的结果：

  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语句，但vehicle变量是emtpy，与它产生的控制台日志不同：

      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语句中，以便我可以向用户显示它们？

谢谢，Ed。

Answer 1

您需要重构代码，您的方法不遵循React的思维方式。这里有很多事情需要改进，但我只列出一对。

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

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

最后，在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

获取数据以保留返回声明

1 个答案: