Question

我正在尝试完成此网络挑战以进行实习面试，我的代码遇到了这个问题：

我的webapp是一个包含4个主要组件的页面： -ProfilePage：所有父项 -UserPanel：侧栏，通过向api的请求显示用户数据 -TabBar：侧栏旁边的容器，其中包含2个组件： -> EventsTab：显示与当前用户有关的事件（与用户窗格上显示的事件相同） -> FriendsTab：显示当前用户的朋友（包含 “获取查询= {this.props.query}操作= {this.props.action} /”） ->提取：组件通过其查询属性接收对API的调用。它还调用下面说明的适当的处理程序函数来处理不同的调用（事件，朋友，用户面板）

经过大量研究和喝咖啡，我的方法是将所有状态提升到我的ProfilePage容器，现在我可以在UserPanel组件中显示用户数据，我正在使用处理程序来调用函数getChildUser（user），而用户是直接从Fetch Component获取的axios response.data，因此从Fetch获取响应。为了给您一个更好的主意，以下是“ / api / players / 4” GET响应的示例：

{
"id": 1,
"first_name": "Foo",
"last_name": "Bar",
"company": "Martin, Hi and Dumont",
"city_name": "Andreberg",
"last_seen": "2018-10-08T12:23:13.687Z",
"picture": "https://s3.amazonaws.com/uifaces/faces/twitter/rawdiggie                                     /128.jpg",
"total_events": 93,
"total_friends": 83
}

处理程序：

     this.getChildUser = this.getChildUser.bind(this);
     this.getFriendsList = this.getFriendsList.bind(this);

    //...
    getChildUser(user) {
      this.setState({
        user: {
           playername: user.first_name + " " + user.last_name,
           picture: user.picture,
           city: user.city_name,
           last_seen: user.last_seen,
           events: user.total_events,
           friends: user.total_friends,
           company: user.company
           }
      });
    }

此处理程序在ProfilePage中的“ UserPanel query =“ / players / 5 /” action = {this.getChildUser}”上调用，其中“ Fetch query = {this.props.query} action = {this”。 props.action}“，然后显示玩家数据：

      //.
      <Card.Title> {this.props.user.events} </Card.Title>
      //.

最后，在我们的“抓取”上：

     axios
    .get(API + "/" + this.props.query)
    .then(response => this.props.action(response.data));

现在，我做了同样的事情来使用相同的Fetch组件来检索朋友列表，但是我只是无法使其正常工作，我发现它与响应的格式有关因为朋友的回应如下：呼叫“ / api / friends / 5”时

 [
          {
          "id": 18508,
        "first_name": "Elisa",
      "last_name": "Caron",
        "company": "Carre, Rolland and Rodriguez",
        "city_name": "West Louisshire",
       "last_seen": "2017-11-14T09:31:52.026Z",
         "picture": "https://s3.amazonaws.com/uifaces/faces/twitter/skkirilov/128.jpg",
        "total_events": 193,
        "total_friends": 25
  },
  {
"id": 92653,
"first_name": "Louis",
"last_name": "Bertrand",
"company": "Nicolas, Faure and Lemaire",
"city_name": "Port Ambretown",
"last_seen": "2018-06-22T11:14:12.862Z",
"picture": "https://s3.amazonaws.com/uifaces/faces/twitter/taybenlor/128.jpg",
"total_events": 113,
"total_friends": 135
 }
]

我尝试使用此处理程序：在这种情况下，名称为getFriendsList 我意识到这是一个嵌套的对象字段，但是我找不到解决它的方法。

    getFriendsList(friendsList){
       this.setState({
            friendsList : [
                       user: {
                       playername: friendsList.user.first_name + " " + friendsList.last_name,
                       picture: friendsList.user.picture,
                       events: friendsList.user.total_events,
                       friends: friendsList.user.total_friends,
                       },
               ]
        })
     }

这次，我们通过调用“ FriendsTab”组件的getFriendsList（response.data）从“ Fetch”中获取信息，然后通过“ TabBar”组件然后再返回“ ProfilePage”

我收到错误：_this.props.friendsList

“ TypeError：_this.props.friendsList未定义”在我的组件中

谢谢！

我尝试将json响应从“ Fetch”转换为数组，更改friendsList结构（尽管我不确定我是否正确完成了该操作）

这是我的github存储库，如果您想更详细地查找它， https://gitlab.com/mRamzi/mybchallenge

编辑：

我可以使用axios确认问题出在我的状态中，而没有正确地将数据放入axios，我使用react dev工具注意到道具已经传递但仍然为空，getFriendsList（）不能正常工作，仍在尝试解决问题< / p>

Answer 1

我已经设法解决了这个问题，如果有人遇到相同的问题，我会继续提供详细信息：

问题确实是由包含嵌套对象的json响应（axios的response.data）的格式引起的，我必须映射到friendsList上并获取值。

如何从孩子的孩子设置父组件状态

1 个答案: