Я пытаюсь добавить функциональность на сайт, где пользователь (обычно скалолаз) может использовать список для навигации по нескольким слоям, чтобы приземлиться в нужном месте.
Шаблон поиска обычно выглядиткак это:
страна / регион / область / скалолазание-скала / стена скал / индивидуальное восхождение
Структура данных, с которой я работаю, выглядит следующим образом:
{
"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, заранее спасибо!