Загрузите ту же конфигурацию после повторного рендеринга компонента или обновления страницы. - PullRequest
Новая
       103

Загрузите ту же конфигурацию после повторного рендеринга компонента или обновления страницы.

0 голосов
/ 25 февраля 2020

Я создал компонент в реаги, который отображает таблицу.

Процесс выполняется следующим образом:

  1. Введите URL-адрес API и нажмите кнопку загрузки ->

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

  3. Нажмите кнопку Загрузить таблицу, чтобы загрузить таблицу.

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

Также, если я вызываю компонент дважды, в двух разных местах на одной и той же веб-странице. Конфигурация должна быть другой для другого компонента. Как я могу это реализовать?

Ответы [ 3 ]

0 голосов
/ 25 февраля 2020

Вы можете начать с чего-то очень простого, используя LocalStorage 

// Read
let yourConfigObject = JSON.parse(window.localStorage.getItem('config'));

// Write
window.localStorage.setItem('config', JSON.stringify(yourConfigObject));

Ваш процесс станет:

1 - введите URL-адрес API и нажмите кнопку загрузки.

2 - Проверьте существующую конфигурацию, используя LocalStorage.getItem. Если такой конфигурации нет, пусть пользователь выберет нужные ему параметры.

3 - Сохраните параметры, используя LocalStorage.setItem, затем загрузите все данные.

0 голосов
/ 25 февраля 2020

Как прокомментировано ранее:

Вам необходимо сохранить значения. Вы можете посмотреть на SessionStorage или любое хранилище HTML5. Для справки: Сохранить введенное значение после refre sh page

Идея:

  • Создать компонент, который принимает 2 функции обратного вызова
    • initState: это инициализирует состояние и начальное поведение. Это можно сделать и снаружи. На ваше усмотрение.
    • clickCallback или actionDispatcher: Это будет вызвано для определенного события c и будет отвечать за установку значения в состояние.

Основа c Идея состоит в том, чтобы сохранить компонент как можно более тупым. Они будут нести ответственность только за взаимодействие с пользователем. Все манипуляции / загрузка данных будут выполняться в редукторе или любой другой функции.

Ниже приведен упрощенный пример: 

const { useState, useEffect } = React;

const DummyComp = (props) => {
  const [ loaded, setLoaded ] = useState(false);
  const [ msg, setMsg ] = useState('');
  useEffect(() => {
    loaded && setMsg('Data has been loaded. Calling callback');
    props.onLoadHandler && props.onLoadHandler();
  }, [ loaded ])
  return (
    <div>
      <p> { msg } </p>
      <button disabled={loaded} onClick={() => setLoaded(true)}>Load Data</button>
    </div>
  )
}

const MyApp = () => {
  const handler1 = () => console.log('Dispatching event 1');
  const handler2 = () => console.log('Dispatching event 2');
  return (
    <div>
      <DummyComp onLoadHandler={() => handler1}/>
      <DummyComp onLoadHandler={() => handler2}/>
    </div>
  )
}

ReactDOM.render(<MyApp/>, document.querySelector('.content'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<div class='content'></div>
0 голосов
/ 25 февраля 2020

Чтобы сохранить состояние ваших компонентов в React, вы можете использовать SessionStorage. Это встроенное хранилище, которое вы можете использовать для хранения JSON объектов в браузере пользователя. См. https://developer.mozilla.org/nl/docs/Web/API/Window/sessionStorage для получения дополнительной информации.

...