从React.js中的API调用打印对象数组

由 发布于

尝试从React.js应用程序中的Triposo API解构我的API调用。控制器已设置：

axios
        .get(url)
        .then(results => 
            ({
                walkTime: results.data.results[0].walk_duration,
                distance: results.data.results[0].walk_distance,
                stops: results.data.results[0].way_points[0]
            })
        )
        .then(walks => res.json(walks))
        .catch(err => res.status(422).json(err))

我有一个组件，如下所示，它将道具传递到我的WalkCard。

  render() {
    return (
      <div>
        <Nav />
        {this.state.walk ? (
          <WalkCard
          walkTime={this.state.walk.time}
          distance={this.state.walk.distance}
          stops={this.state.walk.stops}
          />
        ) : <h3>No Results to Display</h3>}
      </div>
    );
  }

A console.log("props" + JSON.stringify(props.stops)) in my walk card will returns a call:

props{"poi":
  {"id":"Louvre_Palace",
  "name":"Louvre Palace",
  "coordinates":      
    {"latitude":48.8610214504354,
    "longitude":2.3358494222502717},
    "score":9.80399382095609,
    "images":[
    {"source_id":"wikipedia",

但是，当我尝试调用Card卡中的{props.stops [0] .poi.name}时，我得到一个错误，指出0未定义。结果是返回一个Object，我尝试创建一个for循环并在其上进行映射，但无法解构对print的调用。