Reactjs - Мастер детализации навигации - При возвращении Мастер должен быть в том же положении

Question

У меня есть мастер-страница.На этой странице есть список и кнопка загрузки еще.Изначально приложение показывает 100 пунктов.Каждый раз, когда пользователь нажимает кнопку «Загрузить еще», он загружает еще 100 элементов и добавляет их в список.Список может увеличиваться очень долго, и пользователь может долго прокручивать, если элементов много.

Во время прокрутки пользователь может щелкнуть любой элемент, и он перейдет на страницу с подробностями.После этого должна появиться страница с подробной информацией о предмете.На этой странице также должна быть кнопка возврата.При нажатии этой кнопки «назад» необходимо вернуться на главную страницу, но главная страница должна выглядеть точно так же, как и перед переходом на страницу с подробностями.Он должен иметь ту же позицию прокрутки и все те же элементы, которые были загружены ранее там.Вот где проблема заключается в том, что я не могу этого сделать.

Я пытался использовать реакции-маршрутизатор, но при переходе на новый маршрут и возвращении главная страница всегда просто отображается, и позиция прокрутки находится нав верхнюю часть загружены только первые 100 элементов.

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

Я также попробовал что-то вроде {!this.state.isPageOneHidden && <showPageOne> }, и я бы переключил это состояние, но возникает та же проблема.Как только я переключаю этот атрибут, компонент уничтожается, и когда я переключаю его обратно, главная страница воссоздается с нуля и возвращается наверх, и снова отображаются только первые 100 элементов.

function BasicExample() {
  return (
    <Router>
        <Route exact path="/" component={Master} />
        <Route path="/detail/:id" component={Detail} />
    </Router>
  );
}

function Master() {
  return (
    <div>

      /*
        Everytime the Load More button is pressed it makes a call to a service and gets some data to append to the list
      */
      {someArray.map(item => (

           <MyItem key={item.id} dataObject={post} onClick="this.goToDetailPage" />

        ))}

      <Button>Load 10 More</Button>
    </div>
  );
}


function Detail() {
  return (
    <div>

     /*
        Show some detail information here. There should be a back button to transition back to the master page.
     */
    </div>
  );
}


export default BasicExample;

Answer 1

Насколько я понимаю, вы хотите, чтобы состояние сохранялось, даже если страница больше не отображается.Самый простой метод, который я могу придумать для достижения этой цели, состоит в том, чтобы просто всегда сохранять основную страницу отображаемой, но помещать display: none на нее, когда должна отображаться подробная страница.

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

И, наконец, вы можете сохранить состояние вашего приложения в localStorage и затем восстановите свое состояние из него в конструкторе вашей главной страницы.