Как сохранить состояние на страницах, используя Next JS и использовать ловушку Context? - PullRequest
Новая
       35

Как сохранить состояние на страницах, используя Next JS и использовать ловушку Context?

0 голосов
/ 27 апреля 2020

Мое приложение запущено в Next JS, и я хотел бы, чтобы некоторые элементы списка, которые пользователи генерировали в моем индексе. js страница, чтобы оставаться в состоянии каждый раз, когда пользователь нажимает на мои результаты. js страница через <Link>. Я решил, что могу использовать хук useContext для отслеживания состояния на глобальном уровне, но проблема, с которой я сталкиваюсь, заключается в том, что приложение Next JS, кажется, обновляется само всякий раз, когда я делаю изменение страницы, которое отображает мой массив списка пуст. Ниже приведены 4 основных фрагмента кода, которые я создал для достижения постоянного состояния:

Здесь я создал пользовательский _app.js, чтобы обернуть мои страницы состоянием ItemContext, используя .Provider и добавив значения из другого компонента, который я создал, называются useItemState для обработки обработчиков элементов и самих элементов. 

// _app.js

import useItemState from '../components/useItemState';
import ItemContext from '../components/ItemContext';

function MyApp({Component, pageProps}){
    const { items, addItem, deleteItem, updateItem  } = useItemState([]);

    return (
    <ItemContext.Provider value={{items, addItem, deleteItem, updateItem}}>
      <Component {...pageProps} />
    </ItemContext.Provider>
    )
}

  export default MyApp;

Это компонент ItemContext, который содержит начальные значения createContext

// ItemContext.js

const ItemContext = createContext(null)

export default ItemContext

In Index. js, я вызываю элементы и обработчики элементов из моего файла ItemContext, который теперь имеет доступ ко всем этим функциям, поскольку я обернул эту страницу значениями из своего пользовательского файла _app. js. В конце этого файла у меня есть страница <Link> на results.js, которая должна передать значения items, сгенерированные в этом файле. 

// index.js

export default function Index() {
  const { items, addItem, deleteItem, updateItem } = useContext(ItemContext)

// ...misc code here... //

return (
    <Layout>
// ...misc code here... //

      <ItemContext.Provider value={items}>
        <Link href='/results'>
          <a>Click Me</a>
        </Link>
      </ItemContext.Provider>
    </Layout>
  );
}

На странице результатов. js Я ссылаюсь на items из ItemContext, но когда мое приложение попадает на эту страницу, Next JS обновляет его, и я теряю свои предметы. 

// results.js

export default function Results() {
    const { items } = useContext(ItemContext)
    return (
    <Layout>
        {items}
    <Link href='/'> Home </Link>
    </Layout>
    );
}

Как было сказано ранее, я не уверен, как запретить Next JS обновлять приложение при изменениях страницы, чтобы сохранить мое состояние. В следующих JS документах, касающихся пользовательского приложения , ясно говорится, что эта функция возможна: сохранение состояния при навигации по страницам

Я не уверен, что я не использую правильную форму маршрутизация с использованием компонента или если мой useContext logi c испорчен. Я знаю, что мой контекст наверняка работает, потому что моя страница index. js работает надлежащим образом, и я могу записывать элементы в консоль на своей странице результатов за доли секунды до того, как приложение обновится, и они будут удалены. Любая помощь будет принята с благодарностью!

...