Многоуровневый динамический список React Redux - PullRequest
Новая
       10

Многоуровневый динамический список React Redux

0 голосов
/ 04 апреля 2019

Я пытаюсь добавить функциональность на сайт, где пользователь (обычно скалолаз) может использовать список для навигации по нескольким слоям, чтобы приземлиться в нужном месте.

Шаблон поиска обычно выглядиткак это:

страна / регион / область / скалолазание-скала / стена скал / индивидуальное восхождение

Структура данных, с которой я работаю, выглядит следующим образом: 

{
    "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>
    );

Поэтому, по сути, каждый раз, когда пользователь выбирает местоположение, я беру идентификатор выбранного местоположения - запускаю запрос навнешний API, который я использую и который возвращает следующие объекты:

  • Родитель
  • Родительские братья и сестры
  • Выбранное местоположение
  • Выбранные местоположения Братья и сестры
  • Выбранные местоположения Дочерние элементы

Затем я использую эти данные для перестройки списка, однако, как ожидается, между отправкой запроса и получением результата будет существенный разрыв.

На данный момент я просто ищу любые идеи о том, как улучшить процесс.

Можно ли было бы захватить родительских и родительских дочерних элементов и, по сути, «кэшировать» данные, чтобы уменьшить время загрузки?Есть ли лучший способ структурировать вещи, а не вкладывать их в другие, которые вы каждый раз перестраиваете на основе того, что выбирает пользователь?

Вот ссылка на сайт, если я не объяснил структуру списка вдостаточно подробно.

https://gear -report.herokuapp.com

Первый пост на SO, заранее спасибо!

...