Question

我正在尝试向网站（用户通常是攀岩者）可以使用列表导航多层以使其位于所需位置的网站上添加功能。

搜索模式通常如下所示：

国家/地区/区域/攀岩爬网/岩壁/个人攀爬

我正在使用的数据结构如下：

{
    "data": {
        "childIDs": [
            "202210155",
            "12478609",
            "12478633",
            "12478657",
            "12478681",
            "12478705"
        ],
        "depth": "4",
        "id": "11874913",
        "name": "Ti Point",
        "parentID": "11746267",
        "type": "area",
}

所以这就是我目前正在显示它的方式（免责声明：我刚刚完成了一个Bootcamp，我知道这太可怕了，我什至不解构道具，这也不是代码将如何保持它的样子）只是“希望”使人们了解其当前的工作方式。

    return (
        <div className='directory'>
        {this.props.loadChildrenByParent.length > 0 && 
          <List component="nav"
            subheader={<ListSubheader className = {classes.header} component="div">Directory</ListSubheader>}
            className={classes.root}>
            <ListItem button>
              <ListItemText inset primary={this.props.loadParentByCurrent[0].name} 
                                  inset={true} 
                                  value={this.props.loadParentByCurrent[0].id}
                                  onClick={() => this.handleClick(this.props.loadParentByCurrent[0].id)}
                                  />
            </ListItem>

            {this.props.loadChildrenByParent.map((child, i) => {
              {/* If we are not on the item with children, just render the item  */}
              if (child.id != this.props.currentLocation) {
                return (
                <ListItem button
                          selected={this.state.selectedIndex === 2}
                          key={i}
                          onClick={() => this.handleChildClick(child.id)}>
                  <ListItemText inset secondary={child.name} />
                </ListItem> 
                )
              {/* If we are on the item with children, render them  */}
              } else {
                return (
                  <React.Fragment>
                  <ListItem button
                            selected={this.state.selectedIndex === 1}
                            onClick={event => this.handleListItemClick(event, 1)}>
                    <ListItemIcon>
                      <UpIcon />
                    </ListItemIcon>
                    <ListItemText inset secondary={child.name} />
                  </ListItem>

                  <Collapse in={this.state.open} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                    {this.props.children.map((child, i) => {
                      return (<ListItem button className={classes.nested}
                        onClick={() => this.handleClick(child.id)}>
                        <ListItemText inset secondary={child.name} />
                      </ListItem>
                      )
                    })}

                    </List>
                  </Collapse>
                  </React.Fragment>
                )
              }
            })}
        </List>
        }
      </div>
    );

因此，基本上，每次用户选择一个位置时，我都会获取所选位置的ID-向我正在使用的外部API发出一个请求，该请求将返回以下对象：

父母
父母兄弟姐妹
所选位置
所选地点的兄弟姐妹
选定地点的孩子

然后我使用此数据来重建列表，但是正如预期的那样，在提交请求和获得结果之间会有一定的滞后。

目前，我只是在寻找有关如何改善流程的想法。

是否有可能获取父母的父母和子女，并从本质上“缓存”数据以消除加载时间？有没有一种更好的方法来构造事物，而不是嵌套在另一个嵌套中，然后根据用户的选择每次重新构建？

如果我没有足够详细地说明列表的结构，请点击此处。

https://gear-report.herokuapp.com

有关SO的第一篇文章，谢谢！

多级动态列表React Redux

0 个答案: